我正在参加「码上掘金挑战赛」详情请看：码上掘金挑战赛来了！

这是一个用css实现的一个超简单跑马灯。至于为什么写这个，还是因为我在写一个防qq的新项目，想把以前写过的防网易云音乐项目加到这个项目来。网易云项目用的是vue3，跑马灯是用vue3-marquee这个包，所以自己就特意写了一下

项目效果

项目实现

html

• 只需要一个根容器，加上一个包裹文字的span

<div class="marquee-container">
    <span>跑马灯效果</span>
</div>

css

• 给根容器一个相对定位，宽度和高度根据自己需求进行调整
• 边框可给可不给，我这边给是因为效果看起来更明显
• 给子容器一个绝对定位，让他脱离文档流，位置再根据父容器进行调整

.marquee-container{
  position: relative;
  width: 200px;
  height: 30px;
  border: 1px solid red;
}
span{
  position: absolute;
  top: 4px; // (父元素的高度-文字高度) / 2
  right: 0;
  animation: marquee 3s linear infinite;
}
@keyframes marquee{
    /* 开始状态 */
  0% {
   
  }
   /* 结束状态 */
  100% {
   transform: translateX(-200px);
  }
}

css3动画的实现

这个实现，只需要知道css3的新特性动画的基本知识即可， 动画的基本使用分为两步

1. 先定义动画

用@keyframes关键字定义动画

• 0%是动画的开始，100%是动画的完成
• 在@keyframes中规定某项css样式，就能创建由当前样式逐渐改为新样式的动画效果
• 动画是使元素从一种样式逐渐变化为另一种样式的效果，你可以改变任意多的样式任意多的次数
• 百分比可以用来规定变化发生的时间，活用关键字"from"和"to"，等同于0%和100%

2. 再使用动画

• 谁需要动画就写在哪
• 下面是动画的简写书写顺序和动画的属性
• 注意 '动画名称' 和 '持续时间' 是必须写的

animation: 动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 动画起始或者结束的状态;