CSS3中transitiontransform如何实现简单的跑马灯效果
这篇文章将为大家详细讲解有关CSS3中transition transform如何实现简单的跑马灯效果，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。
目前创新互联已为千余家的企业提供了网站建设、域名、虚拟空间、成都网站托管、企业网站设计、婺城网站维护等服务，公司将坚持客户导向、应用为本的策略，正道将秉承"和谐、参与、激情"的文化，与客户和合作伙伴齐心协力一起成长，共同发展。
思考过程
html
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如何实现简单的跑马灯效果
URL地址：
http://kswjz.com/article/ipjose.html
