CSS实现公告栏文字跑马灯特效（VUE组件）

在Vue组件中实现公告栏文字跑马灯特效，可以通过定时更新数组来实现。以下是一个简单的Vue组件例子：

<template>
  <div class="marquee-container">
    <div class="marquee" :style="{ 'animation-duration': duration + 's' }">
      <div v-for="(item, index) in marqueeText" :key="index">{{ item }}</div>
    </div>
  </div>
</template>
 
<script>
export default {
  props: {
    text: {
      type: String,
      required: true
    },
    duration: {
      type: Number,
      default: 10
    }
  },
  data() {
    return {
      marqueeText: [this.text]
    };
  },
  mounted() {
    this.startMarquee();
  },
  beforeDestroy() {
    this.stopMarquee();
  },
  methods: {
    startMarquee() {
      this.intervalId = setInterval(() => {
        const firstItem = this.marqueeText[0];
        this.marqueeText = this.marqueeText.slice(1) + firstItem;
      }, 200); // 根据需要调整时间间隔
    },
    stopMarquee() {
      if (this.intervalId) {
        clearInterval(this.intervalId);
      }
    }
  }
};
</script>
 
<style scoped>
.marquee-container {
  overflow: hidden;
  position: relative;
}
 
.marquee {
  white-space: nowrap;
  position: absolute;
  animation-name: marquee;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-delay: 0s;
}
 
@keyframes marquee {
  from { transform: translateX(100%); }
  to { transform: translateX(-100%); }
}
</style>

在父组件中使用该组件时，只需传入公告文本和跑马灯的持续时间即可。例如：

<template>
  <AnnouncementMarquee text="这是一个公告文本跑马灯效果示例" duration="5"/>
</template>
 
<script>
import AnnouncementMarquee from './AnnouncementMarquee.vue';
 
export default {
  components: {
    AnnouncementMarquee
  }
};
</script>

这个组件会创建一个无限循环的动画，文本会从右向左无止境地滚动。可以通过调整duration来控制滚动一次的时间，从而改变动画的速度。