文字跑马灯效果

跑马灯效果适用于文字、图片等。在项目中有时会因为空间不足，但是又想向用户展示全部信息时，就可以用跑马灯来解决。

在安卓中可以直接使用android:ellipsize="marquee"等相关属性实现，但是在css中直接使用overflow:-webkit-marquee等相关属性，在项目中不起作用，所以最后使用了animation动画的方式实现的，所以记录了实现方法如下。

<template>
  <div class="marquee-container">
    <div class="marquee-wrap">
      第24届冬季奥林匹克运动会（XXIV Olympic Winter
      Games），即2022年北京冬季奥运会，是由中国举办的国际性奥林匹克赛事，于2022年2月4日开幕，2月20日闭幕
    </div>
  </div>
</template>
<script>
export default {
  name: "MarqueeDemo",
};
</script>
<style scoped>
.marquee-container {
  width: 12rem;
  border: 1px solid gainsboro;
  overflow: hidden;
}
.marquee-wrap {
  white-space: nowrap;
  -webkit-animation: marquee 10s linear infinite;
  animation: marquee 10s linear infinite;
}
@keyframes marquee {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-12rem);
  }
}
</style>

如果是竖直方向上的动画，效果就像是音乐播放器的歌词向上滚动的效果类似。