CSS3 はカルーセル アニメーション コードを実装します

カルーセル アニメーションは実装が簡単です

現在、フロントエンドではユーザー インタラクションとエクスペリエンスにますます注目が集まっています。この記事のテーマであるカルーセル アニメーションなど、非常に一般的なアニメーションやエフェクトが数多くあります。これは、以前によく聞かれた用語「マーキー」と同じ効果があります。 CSS3 が登場する前は、アニメーションはすべて JavaScript で実装されていましたが、現在では完全に CSS3 を使用できるようになり、パフォーマンスが大幅に向上し、特にモバイル側での互換性も非常に優れています。

CSS3 アニメーションのパフォーマンスは、特にページに多くのアニメーションやタイマーがある場合に大幅に向上します。

html 構造:

    <h2>CSS实现</h2>
    <p class="wrapper-css">
        <p class="container-css marquee">
            <p>今天</p>
            <p>明天</p>
            <p>后天</p>
            <p>今天</p><!-- 辅助元素，为实现循环轮播 -->
        </p>
    </p>

ループ効果を実現するには、最後に繰り返し補助要素を追加する必要があることがわかります。

CSS コード:

    // 轮播动画
        @-webkit-keyframes marquee {
            0% {
                -webkit-transform: translate3d(0, 0, 0);
            }
            27% {
                -webkit-transform: translate3d(0, 0, 0);
            }
            33% {
                -webkit-transform: translate3d(0, -100%, 0);
            }
            60% {
                -webkit-transform: translate3d(0, -100%, 0);
            }
            67% {
                -webkit-transform: translate3d(0, -200%, 0);
            }
            94% {
                -webkit-transform: translate3d(0, -200%, 0);
            }
            100% {
                -webkit-transform: translate3d(0, -300%, 0);
            }
        }
        @keyframes marquee {
            0% {
                transform: translate3d(0, 0, 0);
            }
            /* 100/3 * (2s/2.5s) => 26.7% => 27% */
            27% {
                transform: translate3d(0, 0, 0);
            }
            /* 100/3 =>33.3 => 33% */
            33% {
                transform: translate3d(0, -100%, 0);
            }
            60% {
                transform: translate3d(0, -100%, 0);
            }
            67% {
                transform: translate3d(0, -200%, 0);
            }
            94% {
               transform: translate3d(0, -200%, 0);
            }
            100% {
                transform: translate3d(0, -300%, 0);
            }
        }
        .wrapper-css {
            width: 200px;
            height: 30px;
            margin: 10px;
            overflow: hidden;
        }

        .container-css {
            height: 30px;
            -webkit-animation: marquee 7.5s linear infinite;/* 2.5s(2s + 0.5s) * 3 => 7.5s */
            animation: marquee 7.5s linear infinite;
        }
        .container-css p {
            width: 100%;
            height: 30px;
            margin: 0;
            line-height: 30px;
            font-size: 18px;
        }

上記のように、CSS3 を使用してアニメーション キーフレームを定義し、それをトランスフォーム ディスプレイスメントと組み合わせて、コンテナを移動してシームレスなカルーセル アニメーションを実現するには、主に以下に基づいてアニメーション キーフレーム ポイントを計算する必要があります。カルーセル要素

以上がCSS3 はカルーセル アニメーション コードを実装しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。