使⽤CSS3动画实现⽂字滚动
以前实现⽂字滚动经常使⽤标签，现在随着H5的兴起，鉴于该标签糟糕的体验，这个标签已经被W3C标准废弃了，尽管现在浏览器还⽀持这个标签，但是寻⽂字滚动的新⽅式才是未来的选择。也有很多⼈会使⽤js脚本来实现⽂字滚动，这是兼容性和可操作性最强的做法。但是这种⽅式往往会使⽤定时器，实时操作DOM，除了⽐marquee能实现更多的滚动效果及功能外，并没有减少性能消耗，并且在⼀些新兴的MVVM框架中，如Vue，React，它们往往会对DOM视图进⾏数据绑定，这时候使⽤js操作DOM来实现⽂字滚动就有可能会破坏这种绑定，当⽂字再改变时就触发不了DOM更新了。随着CSS的发展，实现⽂字滚动有了更好的⽅式，那就是使⽤CSS动画。
当然，仅仅使⽂字滚动使⽤平移动画就好了：
<style>
.scroll{
js控制css3动画触发width: 200px;
height: 50px;
line-height: 50px;
white-space: nowrap;
overflow: hidden;
font-size: 30px;
border: 1px solid #FF0000;
}
.scroll span{
display: inline-block;/*inline样式不能使⽤动画*/
animation: scroll 10s linear infinite;
}
@keyframes scroll {
from {
transform: translateX(200px)
}
to {
transform: translateX(-100%)
}
}
</style>
<div class="scroll">
<span>我是⼀个滚动条啊滚动条</span>
</div>
但是这种滚动⽅式体验很差，中间有过多空⽩，接下来我们要实现⼀个⾸尾相连的⽂字滚动。在不使
⽤js改变DOM结构的前提下，要为span⾥添加重复内容我们可以使⽤after伪元素，它有个attr函数可以获取所在⽗元素的属性内容，前提只要我们提前将span⾥的内容同时设置到属性⾥⽐如data-text，我们就可以只使⽤CSS为span添加尾部内容，这对使⽤VUE等框架是很⽅便的。
line-height: 50px;
font-size: 30px;
white-space: nowrap;
overflow: hidden;
border: 1px solid #ff0000;
}
.scroll span{
display: inline-block;/*inline样式不能使⽤动画*/
animation: scroll 12s linear infinite;
}
.scroll span:after{
content: attr(data-text);
margin-left: 4em;
}
@keyframes scroll {
from {
transform: translateX(0);
}
to {
transform: translateX(calc(-50% - 2em)); /*总长的⼀半再加上margin-left的⼀半*/
}
}
</style>
<div class="scroll">
<span  data-text="我是⼀个滚动条啊滚动条">我是⼀个滚动条啊滚动条</span>
</div>
上⾯已经基本上实现了⾸尾相连的⽂字滚动了，但是带有inline性质的元素会继承上层的很多样式影响布局，同时不同浏览器对div.scroll的最终宽度计算会有偏差，导致⽂字滚动出现错位。为了抹平差异，我们要对after元素使⽤绝对定位。
height: 50px;
line-height: 50px;
font-size: 30px;
white-space: nowrap;
overflow: hidden;
border: 1px solid #ff0000;
}
.scroll span{
display: inline-block;/*inline样式不能使⽤动画*/
animation: scroll 12s linear infinite;
}
.scroll span:after{
position: absolute;
left: 100%;
content: attr(data-text);
margin-left: 4em;
}
@keyframes scroll {
from {
transform: translateX(0);
}
to {
transform: translateX(calc(-100% - 4em)); /*总长再加上margin-left*/
}
}
</style>
<div class="scroll">
<span  data-text="我是⼀个滚动条啊滚动条">我是⼀个滚动条啊滚动条</span>
</div>
这样⼀个纯CSS实现的⽂字滚动的效果就实现了，如果要实现⽂字超长滚动只需判断div⾥的span宽度是否超出并为div添加scroll类即可。但是以上实现还是存在⼀个缺点，就是动画周期是提前定好的，对于不同长度的⽂字，滚动的速度会有快有慢，如果要追求对任何⽂字长度均采⽤固定速度滚动，可以使⽤js根据span宽度动态指定动画周期。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。