CSS を使用してスクロールするピクチャ バーを実装する方法 (コード例)

この記事では、CSS を使用してスクロールするピクチャ バーを実装する方法 (コード例) を紹介します。必要な方は参考にしていただければ幸いです。

一部の Web サイトでは、CSS アニメーション効果によって画像が連続的にスクロールすることがよくあります。具体的な効果は次のとおりです

#主な原則は、アニメーションによって左に移動することです。

まず、同じ絵を 2 セット (同じ行に) 与え、絵全体を 1 つの絵のグループの長さだけ左に移動します。

このようにすると、すぐに戻ります。アニメーションが終了すると、元の位置に戻ります。このとき、2 番目の画像グループと交互に表示され、連続ループで左にスクロールするように見えます。

具体的な手順は次のとおりです。

1. 本体コードのあらゆる場所に同じ画像を 2 セット設定します。

 <nav>
        <ul>
            <li><img src="Images/1 (2).jpg" alt=""></li>
            <li><img src="Images/2 (2).jpg" alt=""></li>
            <li><img src="Images/3 (2).jpg" alt=""></li>
            <li><img src="Images/1 (2).jpg" alt=""></li>
            <li><img src="Images/2 (2).jpg" alt=""></li>
            <li><img src="Images/3 (2).jpg" alt=""></li>
        </ul>
    </nav>

2. ナビゲーションのサイズを設定します。幅は画像のグループの合計です。幅と高さは画像の高さです。

 
        nav {
            width: 750px;
            height: 170px;
            border: 1px solid red;
            margin: 100px auto;
}

3. UL サイズを設定し、幅はナビゲーションの 2 倍、高さはナビゲーションと同じにし、アニメーション関連の属性を指定します。主に画像のグループを左側に移動します。長さ

ul {
            width: 200%;
            height: 100%;
            animation: picmove 5s linear infinite forwards;
        }

5. マウスホバーとアニメーションの一時停止効果を追加します

 @keyframes picmove {
            from {
                transform: translate(0);
            }
            to {
                transform: translate(-750px);
            }
        }

6. 最後に、超えた部分を非表示にするために、ナビゲーションにoverflow:hiddenを追加します。これで、スクロール ピクチャ バーのセット全体が完了しました。

全体のコードは次のとおりです。

ul:hover {
            animation-play-state: paused;
        }

要約: 上記がこの記事の全内容です。皆さんのお役に立てば幸いです。勉強。関連チュートリアルの詳細については、

CSS 基本ビデオ チュートリアル

、 CSS3 ビデオ チュートリアル をご覧ください。

以上がCSS を使用してスクロールするピクチャ バーを実装する方法 (コード例)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。