往前走，一片诱人的新绿尽收眼底，那是满池的新荷。荷叶有的平展着圆盘浮在水面上；有的绿伞般在空中摇曳；有的兜着水珠把阳光反射得灿烂夺目；有的长得非常高，却未展开叶面，勇敢地挺立着。荷花则多半含苞待放，白中透粉的一朵朵花儿，活像一个个花仙子借着微风，在池中裙袂飞扬，翩然起舞。
这是之前客户的一个需求，给的 demo 是用 gif 实现跑马灯，但是我们的没法用 gif，因为图上的文字需要翻译成各国语言，所以不能使用图片来实现，那么，自己写一个咯。
思考过程
html
<div lantern>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
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 transition transform 如何实现简单的跑马灯效果的示例请关注haodaima.com其它相关文章！
![CSS3如何使用多列制作瀑布流]("img/1.png)
![浅谈css中vertical-align和line-height的用法]("./131796750659172.jpg)
![CSS固定宽度的三列布局运用实例解析]("byd.jpg"/><imgsrc="byd.jpg"/><imgsrc="byd.jpg)
