# 实现文字滚动播放 实现文字滚动播放，通过使用`CSS3`动画与`Js`控制来实现，由于使用`CSS`动画来控制偏移限制较多，因此通常还是使用`Js`来实现。 ## 实现 ### CSS Animation 使用`CSS`动画方法，使用`position: relative`配合`left`属性来控制文字元素距离左侧相对偏移的距离。此方法的主要问题在于`left`是`100%`是相对于父级元素的宽度来说的，因此这个值的设定要取决于父级元素的宽度和本身元素内容的宽度。 ```html CSS Animation
循环滚动播放滴滴答答滴滴答答滴滴答答
``` 使用`CSS`动画方法，使用`transform: translateX()`属性来控制文字元素距离左侧相对偏移的距离，此方法同样也存在上述的问题。 ```html CSS Animation
循环滚动播放滴滴答答滴滴答答滴滴答答
``` ### JavaScript 使用`Javascript`我们能够实现无缝滚动，即需要复制一份一样的元素至原元素的后方，当第一个元素滚动完成后我们立即将位置复原。 ```html Javascript
循环滚动播放滴滴答答滴滴答答滴滴答答
``` ## 每日一题 ``` https://github.com/WindrunnerMax/EveryDay ``` ## 参考 ``` https://zhuanlan.zhihu.com/p/101107612 ```