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 サイズを設定し、幅は nav の 2 倍、高さは nav と同じにし、アニメーション関連の属性を指定します

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

4. アニメーションを定義します。主に画像のグループの長さを左に移動します。

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

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

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

#6. 最後に、オーバーフロー: 非表示をナビゲーションに追加して、超過した部分を非表示にします。これで、スクロールする画像バーのセット全体が完了します。わかりました

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

    
    
    
    
    



    <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>

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