创建一个可以循环滚动的文本，可能没这么简单。
如何创建一个可以向左循环滚动的文本？
创建如上图效果的滚动文本，你能想到几种方式？
-------- 暂停阅读，不如你自己先试一下 --------
方式一：
根据页面宽度，生成多个元素。每个元素通过js控制，每帧向左偏移一点像素。
如果偏移的元素不可见后，将此元素再移动到屏幕最右边。
此方式容易理解，实现起来也不困难，但是有性能上的风险，因为每一帧都在修改元素的位置。
方式二：
根据页面宽度，生成多个元素。每个元素通过js控制，通过setInterval每一秒向左偏移一些像素。
然后结合css的transition: all 1s linear;使得偏移更加顺滑。
如果偏移的元素不可见后，将此元素再移动到屏幕最右边。
使用此方法可以避免高频率计算元素位置，但是此方式控制起来更复杂，主要是因为，将元素移动到最右边的时候，也会触发transition ，需要额外逻辑控制在元素移到最右边的时候不触发transition。
并且在实际开发中发现。当窗口不可见时候动画实际会暂停，还需要控制当窗口隐藏时候，暂停setInterval。
方式三:
换一种思路。按顺序排列元素，多个子元素首位相接。将每个子元素通过animation: xxx 10s linear infinite;
从左到右移动。在一定范围内移动子元素，通过视觉错觉，像是整个大元素(盒子)都在移动。
此方式简单，并且无需JS，性能较好。
下面是完整代码（可以控制浏览器宽度，查看不同尺寸屏幕的效果）
<!doctype html>
<html>
<head>
<title>LOOP</title>
<style>
@keyframes loop {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-100%);
}
}
.box {
white-space: nowrap;
}
.scrollContent {
width: 600px;
display: inline-block;
text-align: center;
animation: loop 3s linear infinite;
}
</style>
</head>
<body>
<div class="box">
<div class="scrollContent">
这是一段可以滚动的文本
</div>
<div class="scrollContent">
这是一段可以滚动的文本
</div>
<div class="scrollContent">
这是一段可以滚动的文本
</div>
<div class="scrollContent">
这是一段可以滚动的文本
</div>
<div class="scrollContent">
这是一段可以滚动的文本
</div>
<div class="scrollContent">
这是一段可以滚动的文本
</div>
</div>
</body>
</html>
方式四：
方式三会创建多份一样的文本内容，你可能会说，屏幕上同时出现这么多文本元素，当然要创建这么多一样的内容。
其实还有一种性能更佳的方式:text-shadow: 600px 0 currentColor,通过此方式创建多份文本副本，达到类似效果。
此方法性能最佳。但是对非文本无能为力。
<!doctype html>
<html>
<head>
<title>LOOP</title>
<style>
@keyframes loop {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-100%);
}
}
.box {
white-space: nowrap;
}
.scrollContent {
color: rebeccapurple;
width: 600px;
display: inline-block;
text-align: center;
animation: loop 3s linear infinite;
text-shadow: 600px 0 currentColor, 1200px 0 currentColor, 1800px 0 currentColor, 2400px 0 currentColor;
}
</style>
</head>
<body>
<div class="box">
<div class="scrollContent">
这是一段可以滚动的文本
</div>
</div>
</body>
</html>
总结
方式1：应该是最直接想到的方式。但是出于对性能的担忧。
方式2：由于方式1性能优化得到，但是方式2过于复杂。
方式3： 看上去非常易于实现，实际很难想到。
方式4：如果对text-shadow和css颜色掌握不熟，根本难以实现。
希望对你有所启发
来源：juejin.cn/post/7273026570930257932
