开发日记（11）: 用纯css3实现无缝衔接文字滚动效果

需求：

实现一个不断滚动播报的提示语

html

复制数据的作用在于填充原始数据向左滚动时候，留下的空白。

css

下面是原始的布局部分

下面为动画部分

思路解析

1、计算原始数据的总宽度 设置为 动画的运动的最终位置；

2、复制同样的数据放在pig下，目的是当原始数据向左移动中，填补页面中出现的空缺；

3、当原始数据运动到 -600px后，复制数据刚好运动到页面 x=0 位置，这个时候，动画从头开始，原始数据回到 x=0位置，实现无缝衔接；