结合 CSS3 transition transform 实现简单的跑马灯效果的示例css3 中translate和transition的使用方法CSS3之transition实现下划线的示例代码详解css3 Transition属性（平滑过渡菜单栏案例）CSS3 transition 实现通知消息轮播条

1
2
3
4

 * { margin: 0; padding: 0; } [lantern] { overflow: hidden; } ul { white-space: nowrap; font-size: 0; transform: translateX(0); transition: transform 0s linear; } li { width: 50vw; border: 1px solid red; display: inline-block; height: 30px; font-size: 16px; } 

 function lantern($element,speed = 10) { let liWidth = 0; let $ul = $element.find("ul"); function run(init = false) { let $li = $ul.find("li").first(); liWidth = $li.outerWidth(); if(!init){ $ul.append($li[0].outerHTML); $li.remove(); } $ul[0].style.transitionDuration = "0s"; $ul[0].style.transform = "translateX(0)"; setTimeout(function() { $ul[0].style.transitionDuration = speed + "s"; $ul[0].style.transform = "translateX(-" + liWidth + "px)"; }, 20); } run(true); setTimeout(() => { setInterval(run, speed * 1000); }, 0); } lantern($('[lantern]'), 20);