CSS3-Übergänge und -Transformationen erzielen einen Marquee-Effekt

Dieser Artikel stellt Ihnen hauptsächlich relevante Informationen zum Beispiel der Kombination von CSS3-Übergangstransformationen vor, um einen einfachen Marquee-Effekt zu erzielen. Der Herausgeber findet es ziemlich gut, daher werde ich es jetzt mit Ihnen teilen und es als Referenz geben. Folgen wir dem Herausgeber, um einen Blick darauf zu werfen. Ich hoffe, es kann allen helfen.

Dies ist eine Anforderung eines früheren Kunden. Die gegebene Demo bestand darin, GIF zur Implementierung des Festzelts zu verwenden, aber wir können GIF nicht verwenden, da der Text auf dem Bild in verschiedene Sprachen übersetzt werden muss, sodass wir es nicht verwenden können Bilder, um es zu erreichen. Dann schreiben Sie selbst eines. 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);

Verwandte Empfehlungen:

Implementierung des Text-Marquee-Effekts

Beispiel für die Implementierung eines schönen Marquee-Effekts in WPF

Erzielen Sie im Miniprogramm ähnliche Effekte wie die Tmall-Lotteriescheibe und das Festzelt

Das obige ist der detaillierte Inhalt vonCSS3-Übergänge und -Transformationen erzielen einen Marquee-Effekt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!