結(jié)合 CSS3 transition transform 實(shí)現(xiàn)簡(jiǎn)單的跑馬燈效果的示例
發(fā)布時(shí)間：2018-02-07 15:30:53 作者：王鐵手 
我要評(píng)論
我要評(píng)論這篇文章主要介紹了結(jié)合 CSS3 transition transform 實(shí)現(xiàn)簡(jiǎn)單的跑馬燈效果的示例的相關(guān)資料，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
這是之前客戶的一個(gè)需求，給的 demo 是用 gif 實(shí)現(xiàn)跑馬燈，但是我們的沒(méi)法用 gif，因?yàn)閳D上的文字需要翻譯成各國(guó)語(yǔ)言，所以不能使用圖片來(lái)實(shí)現(xiàn)，那么，自己寫(xiě)一個(gè)咯。
思考過(guò)程
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);
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
css3 中translate和transition的使用方法
這篇文章主要介紹了css3 中translate和transition的使用方法,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-03-26
CSS3之transition實(shí)現(xiàn)下劃線的示例代碼
這篇文章主要介紹了CSS3之transition實(shí)現(xiàn)下劃線的示例代碼的相關(guān)資料，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-05-30
詳解css3 Transition屬性（平滑過(guò)渡菜單欄案例）
這篇文章主要介紹了詳解css3 Transition屬性（平滑過(guò)渡菜單欄案例）的相關(guān)資料,需要的朋友可以參考下2017-09-05
CSS3 transition 實(shí)現(xiàn)通知消息輪播條
這篇文章主要介紹了CSS3 transition 實(shí)現(xiàn)通知消息輪播條,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-10-14
