本文已参与好文召集令活动，点击查看：[后端、大前端双赛道投稿，2万元奖池等你挑战！](https://juejin.cn/post/6978685539985653767) 提到跑马灯，你会想到怎么实现？ # **用``标签实现？** 上百度搜`marquee`,第一条答案就告诉你——**已废弃** ![06906-lzulkunbru.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/37b842704bc64823a49df2048f38cb6c~tplv-k3u1fbpfcp-zoom-1.image) # **用`JS`实现一套？** 这大概是目前最普遍的实现方式。思路有很多，比如用js计算偏移量，用循环定时任务去移动偏移量。可以是： - 定时任务+transform - 定时任务+scroll 不管是哪种方式，代码量少说也有100行左右，还需处理各种状态判断。由于没有找到合适的方案（在我看来，不能直接拿来用的代码就不是好代码）；所以只能自己造轮子，今天刚出炉的，给你介绍一下。 # **用`css`实现** 本例方案：用纯CSS动画实现跑马灯。 > **思路：采用animation循环动画，搭配CSS属性做到循环滚动，再根据文案长短动态设置动画时长。** ## 代码实现标签： ```

跑马灯滚动起来……

``` css： ``` @keyframes marqueeAnim { 0% { transform: translateX(100vw); } 100% { transform: translateX(-100%); } } .marquee-content { white-space: nowrap; display: inline-block; color: chocolate; animation: marqueeAnim 5s linear 0s infinite; } .marquee-root { width: 100%; height: 30px; text-align: left; line-height: 30px; overflow: hidden; background-color: burlywood; } ``` **over** 以上就是跑马灯的简单实现了。**上面的跑马灯可以做到不管是多少文案，都能够展示完毕再进行下一次循环滚动。** 但是在变换莫测的产线环境，文案可短可长，这种固定动画时长的方案可能会导致下面这种问题： ![屏幕录制 2021-07-14 下午10.19.22.gif](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/bcaa8b0b4fd946fab6892f1e75dd7cc0~tplv-k3u1fbpfcp-watermark.image) ![屏幕录制 2021-07-14 下午10.22.52.gif](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/9d6cdc6036014612ac1dc4f26536bc17~tplv-k3u1fbpfcp-watermark.image) 没错，有的快有的慢，文案很多的时候就快得离谱。 ## 动态控制动画时间根据文案的多少来决定动画时长。很简单，只要一行代码。 ``` style={{ animationDuration: marqueeStrs.length * 0.2 + 5 + "s" }} ``` 在你的动画div上面添加这个`style`，`marqueeStrs`是你的跑马灯文案，`0.2`是时间系数，可以根据实际情况修改，`+ 5`是添加时间基数，不然文案少的时候就飞起来了。全代码： ``` //todo test data const marqueeStrs = "跑马灯滚动起来…… 跑马灯滚动起来…… 跑马灯滚动起来…… "; return (

{marqueeStrs}

); ``` **前面的css不需要修改。** 效果图对比： ![屏幕录制 2021-07-14 下午11.15.14.gif](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/0f5cac41210b4a72b299292274ba9312~tplv-k3u1fbpfcp-watermark.image) ![屏幕录制 2021-07-14 下午11.17.45.gif](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/e8e9f28fbb7b430a873d62cefc6b60db~tplv-k3u1fbpfcp-watermark.image) 可以看到两张图的速度基本相等。 ## 小结这个方案看起来很简单，但是有一些点是需要注意的。 1. `white-space: nowrap;` 可以让你的文案强制不换行。 2. `display: inline-block;` 可以让你的跑马灯布局根据内容自适应。 3. `overflow: hidden;` 父布局设置这个属性可以让跑马灯内容超出部分被隐藏。 4. `0%`时`transform: translateX(100vw);` 是为了让跑马灯从屏幕外开始移动。 5. `100%`时`transform: translateX(-100%);` 是为了让跑马灯布局滚动整个布局宽度（不是屏幕宽度），最后滚到屏幕外。以上几个CSS样式是本次跑马灯实现的核心支撑。当然，还有最后的`动态计算动画时间`也是核心步骤。那么，你应该会了。如果你有更好的方案，欢迎评论区留言，Show出你的代码！