CSS3 transition和transform实现跑马灯效果
作者: default|标签:Transition transform CSS3|2018-2-9 11:12
本文主要和大家介绍结合 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);

相关推荐:

文字跑马灯效果的实现

WPF实现好看的跑马灯特效实例

小程序中实现类似天猫抽奖的大转盘和跑马灯的效果

以上就是CSS3 transition和transform实现跑马灯效果的详细内容,更多请关注php中文网其它相关文章!

135
点赞
收藏
分享:
0/300