CSS3 transition和transform實現跑馬燈效果

本文主要和大家介紹結合 CSS3 transition transform 實現簡單的跑馬燈效果的樣本的相關資料，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧，希望能協助到大家。

這是之前客戶的一個需求，給的 demo 是用 gif 實現跑馬燈，但是我們的沒法用 gif，因為圖上的文字需要翻譯成各國語言，所以不能使用圖片來實現，那麼，自己寫一個咯。html

<p lantern>  <ul>    <li>1</li>    <li>2</li>    <li>3</li>    <li>4</li>  </ul></p>

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);