使用css实现字幕滚动效果

首先是动画的定义和样式的定义
然后使用vue来做个模板
完整代码

<template>
  <div class="card_detail_box">
    <div class="card_detail_box_container">
      <slot></slot>
    </div>
  </div>
</template>

<script>
export default {
  name: "scrollText",
  props: {},
};
</script>
<style lang="less" scoped>
@keyframes scroll_show {
  0% {
    transform-origin: top;
    transform: scale3d(1, 1, 1) translateY(100%);
  }
  100% {
    transform-origin: top;
    transform: scale3d(1, 1, 1) translateY(-100%);
  }
}
.card_detail_box {
  overflow: hidden;
  height: 100%;
  position: relative;
}
.card_detail_box_container {
  line-height: 1.3em;
  font-size: 14px;
  width: auto;
  height: auto;
  min-height:100%;
  color: red;
  animation: scroll_show 10s infinite linear;
}
</style>

使用

<template>
  <div class="test">
    <scrollText
      >公交车，指通常情况下循固定路线，有专属路号，承载旅客出行的专用机动车辆。一般外形为方型，有窗，设置座位。在城区，公共汽车时速一般在25~50公里/小时，在郊区可达80公里/小时。又称为公共汽车、公汽或巴士，其中“公交”是公共交通的简称；公交车中国台湾又称为公车、客运或巴士；在中国香港和中国澳门，则多称为巴士（英语中“Bus”的音译）。</scrollText
    >
  </div>
</template>

<script>
import scrollText from "../../../components/scrollText.vue";
export default {
  data() {
    return {
      provinceDistrict: new AMap.DistrictSearch({
        subdistrict: 0,
        extensions: "all",
        level: "province",
      }),
    };
  },
  components: {scrollText},
};
</script>
<style lang="less" scoped>
.test{
  background: black;
  width: 400px;
  height: 400px;
}
</style>

模板效果