CSS3 transition and transform for a marquee effect

This article mainly and we introduce the combination of CSS3 transition transform to achieve a simple example of the results of the light, small series feel very good, and now share to everyone, but also for everyone to do a reference. Follow the small series together to see it, hope to help everyone.

This is a customer needs before, to the demo is to use GIF to realize the marquee, but we can not use GIF, because the text needs to be translated into different languages, so you cannot use the image to achieve, then, write a slightly. 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 = ten) {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] ');