css3动画实现滚动字,类似航班信息,超出滚动,不超出不滚动
文字走马灯,手机的弹幕等等。
js可以动态的计算宽度,但js做动画需要定时器,很不方便。
其实就是里外容器对向滚动,滚动的值为里外容器宽度的差值,如果里容器与外容器等宽,那么差值就为0,视觉上是没有滚动的,就像第一条数据;如果里容器宽度比外容器宽,里容器向左滚动的距离比外容器向右滚动的距离大,就会形成滚动效果,并在里容器translateX为-100%外容器translate为100%时停下,视觉效果就是滚动到文字的最右侧。
里容器的float: left;是为了形成块级格式化上下文,避免文字撑不开容器。
<head> <meta charset="utf-8"> <style> .item{ height:100px; width:200px; background:pink; } .marquee { overflow: hidden; } .marquee .marquee-wrap { width: 100%; animation: marquee-wrap 4s infinite linear; } .marquee .marquee-content { float: left; white-space: nowrap; min-width: 100%; animation: marquee-content 4s infinite linear; } @keyframes marquee-wrap{ 0%, 30% { transform: translateX(0); } 70%, 100% { transform: translateX(100%); } } @keyframes marquee-content{ 0%, 30% { transform: translateX(0); } 70%, 100% { transform: translateX(-100%); } } </style> </head><body> <ul> <li class="item marquee"> <div class="marquee-wrap"> <div class="marquee-content"> 这个是非超长数据不动。 </div> </div> </li> <li class="item marquee"> <div class="marquee-wrap"> <div class="marquee-content"> 这是头,这个是超长数据,我超长了哦,我超长了哦,我超长了哦。 </div> </div> </li> </ul> </body>