文字走马灯,手机的弹幕等等。

js可以动态的计算宽度,但js做动画需要定时器,很不方便。

其实就是里外容器对向滚动,滚动的值为里外容器宽度的差值,如果里容器与外容器等宽,那么差值就为0,视觉上是没有滚动的,就像第一条数据;如果里容器宽度比外容器宽,里容器向左滚动的距离比外容器向右滚动的距离大,就会形成滚动效果,并在里容器translateX为-100%外容器translate为100%时停下,视觉效果就是滚动到文字的最右侧。

里容器的float: left;是为了形成块级格式化上下文,避免文字撑不开容器。