CSS3 トランジションとトランスフォームでマーキー効果を実現

この記事では、CSS3 トランジション変換を組み合わせて単純なマーキー効果を実現する例について、主に関連情報を紹介します。編集者はこれが非常に優れていると考えたので、参考として共有します。編集者をフォローして見てみましょう。皆さんのお役に立てれば幸いです。

これは以前の顧客の要件で、gif を使用してマーキーを実装するというものでしたが、画像上のテキストをさまざまな言語に翻訳する必要があるため、gif を使用して実装することはできません。 . だから、自分で書いてください 1つだけ。 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);

関連推奨事項:

テキストマーキー効果の実装

素晴らしい特殊効果の例をご覧ください

ミニプログラムでは、天猫宝くじの大型ターンテーブルやマーキーと同様の効果が得られます

以上がCSS3 トランジションとトランスフォームでマーキー効果を実現の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。