vue和css3动画制作简单的文字跑马灯特效

 之前项目遇到一个小的文字跑马灯特效，查阅了一下，可以采用html的marquee标签制作，但是兼容性不好；还可以采用css3动画制作，也可以采用js制作，但是最后采用css3动画制作以减少性能消耗;
啥话不多说，直接上代码

<template>
  <div class="lap-coponent">
    <div class="container">
      <div class="lap">{{ text }}</div>
    </div>
  </div>
</template>

<script>
export default {
  name: "LapComponent",
  data() {
    return {
      text: "跑马灯测试",
    };
  },
  mounted() {},
};
</script>

<style scoped lang="less">
.container {
  margin-left: calc(50% - 100px);
  width: 200px;
  height: 40px;
  overflow: hidden;
  white-space: nowrap;

  .lap {
    display: inline-block;
    padding-left: 100%;
    animation: lapAnimate 8s linear infinite;
  }
}
@keyframes lapAnimate {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}
</style>

这样简单的文字跑马灯就出来啦