ホームページ > 記事 > ウェブフロントエンド > 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 サイトの他の関連記事を参照してください。