结合 CSS3 transition transform 实现简单的跑马灯效果的示例

这是之前客户的一个需求，给的 demo 是用 gif 实现跑马灯，但是我们的没法用 gif，因为图上的文字需要 翻译 成各国语言，所以不能使用图片来实现，那么，自己写一个咯。

思考过程

ht ML

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

css

* {
  m arg in: 0;
  padding: 0;
}

[lantern] {
  overflow: hidden;
}

ul {
  wh IT e -s pace: nowra p; 
  font- Size:  0;
  transform: trans latex (0);
  transition: transform 0s linear;
}

li {
  width: 50vw;
  border: 1px solid  red ;
  dis play : inline-block;
  h ei ght: 30px;
  font-size: 16px;
}

js

function lantern($element,s PE ed = 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 实现简单的跑马灯效果的示例 所遇到的问题。

如果觉得 网站内容还不错， 推荐好友。

查看更多关于结合 CSS3 transition transform 实现简单的跑马灯效果的示例的详细内容...