简单的实现文字滚动效果

1. .box需要确定展示区域的宽度width,%20同时禁止子元素超出区域,%20用于隐藏超出的文本;
2. ①.content中设置文字超出不换行,%20让所有文字都在同一行上;%20②同时因为.content是div,%20所以会自动继承父级元素的宽度,%20在这种情况下设定translateX(-100%)自会向左移动父级元素宽度的距离,%20而不是文本长度的距离,%20所以需要将.content的宽度设置为内容的最大宽度max-content,%20或者让.content通过浮动float或绝对定位position:%20absolute来脱离文本流,%20不继承父级宽度,%20让内容撑开宽度。 样式如下:

.box%20{
%20%20width:%20398px;
%20%20height:%2040px;
%20%20line-height:%2040px;
%20%20background:%20#a5b4fc;
%20%20color:%20#fff;
%20%20overflow:%20hidden;
}

.content%20{
%20%20white-space:%20nowrap;
%20%20width:%20max-content;
}

效果: 可以看到基本的摆放效果已经没问题了。

添加动画

定义一个动画, 使用transform: translateX来设定.content的移动, 动画如下:

@keyframes roll {
  0% {
    transform: translateX(380px);
  }
  100% {
    transform: translateX(-100%);
  }
}

注意: 动画在开始的时候, 让.content向右移动.box宽度的距离, 这样所有的文字都在展示区域的右侧, 用户看不到文字, 最后执行到transform: translateX(-100%)时, 所有文字都在展示区域的左侧, 用户同样看不到文字; 这样重复执行动画时, 用户看上去像是无缝滚动。 最后将动画效果添加到.content, 就可以看到效果了:

计算动画执行时间

这个比较简单，获取文字元素，用于获取文本的实际宽度和设定动画执行时间：

const contentEl = document.querySelector('.content')

设定速度，经过多次调整，个人觉得比较适合的速度是110px/s，这个因人而异：

const speed = 110

随后就是给文本元素添加动画执行时间：

contentEl.style.animationDuration = contentEl.clientWidth / speed + 's'

至此，一个完整的文字滚动效果就完成了。