这是之前客户的一个需求，给的 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);

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。

猜你喜欢

• 用CSS3怎样将2D变换3D的效果，方法是什么

  css3实现了对元素执行2D平面变换，以及视觉上的3D空间变换，2D变换平时可能用的较多，3D效果也能锦上添花，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

• chrome最小字体限制的问题如何解决？教你两种方法

  chrome最小字体限制的问题如何解决？一些朋友可能知道Chrome 默认最小字体是12px，这样的设计也是出于为了更好显示中文，但是这样的设计也有一个坏处，就是可能会出现某些上标、下标字体过大的情况，这对于用户体验并不好，那么我们有没有什么解决方法呢？接下来给大家分享两种方法，感兴趣的朋友可以了解看看。

• 用Canvas怎样实现元素阴影强烈发光的效果，方法是什么

  这篇文章主要介绍了canvas多重阴影发光效果实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

• CSS实现导航栏顶部固定的方法有什么？

  导航栏顶部固定的效果在很多网站上都能看到，这样的好处就是方便用户搜索和跳转到其他页面，而实现这一效果的方法很多。这篇文章主要介绍用CSS实现的方法，下文还介绍了它们的优缺点，感兴趣的朋友就继续往下看吧。

• 用css3怎样写有趣的各种天气动画效果？

  今天给大家分享一个有趣的实例，就是用CSS3写各种天气的动画效果，实现效果如下，有晴天、阴天、雨天等等，是不是挺有有趣的?那么这些效果是如何实现呢？接下来我们一起了解看看。