CSS3中transitiontransform如何实现简单的跑马灯效果
这篇文章将为大家详细讲解有关CSS3中transition transform如何实现简单的跑马灯效果,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。
目前创新互联已为千余家的企业提供了网站建设、域名、虚拟空间、成都网站托管、企业网站设计、婺城网站维护等服务,公司将坚持客户导向、应用为本的策略,正道将秉承"和谐、参与、激情"的文化,与客户和合作伙伴齐心协力一起成长,共同发展。
思考过程
html
- 1
- 2
- 3
- 4
css
* { 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; }
js
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);
关于“CSS3中transition transform如何实现简单的跑马灯效果”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看到。
分享题目:CSS3中transitiontransform如何实现简单的跑马灯效果
网站路径:http://ybzwz.com/article/ipjose.html