ホームページ >ウェブフロントエンド >CSSチュートリアル >CSSで画像をスクロールする方法
CSSで画像をスクロールする方法
- 藏色散人オリジナル
- 2021-01-28 10:41:128615ブラウズ
CSS で画像をスクロールする方法: まず、本体コードの各部分に 2 つの同一の画像を設定し、次にナビゲーション サイズと UL サイズを設定し、次にアニメーションを定義し、マウス ホバーとアニメーションの効果を追加します。余分な部分を非表示にするには、nav に「overflow:hidden」を追加するだけです。
このチュートリアルの動作環境: Windows7 システム、HTML5&&CSS3 バージョン、DELL G3 コンピューター。
推奨: css ビデオ チュートリアル
まず、同じ絵を 2 セット (同じ行に) 用意し、全体の絵を長さだけ左に移動します。 1セットの写真。
このように、アニメーションの終了時にすぐに元の位置に戻り、この時点で 2 番目の写真セットと交互に表示されます。連続ループに残ってしまいます。
具体的な手順は次のとおりです:
1. 本体コード内のあらゆる場所に同じ画像を 2 セット設定します
<nav> <ul> <li> <img src="image/1.jpg" alt=""></li> <li> <img src="image/2.jpg" alt=""></li> <li> <img src="image/3.jpg" alt=""></li> <li> <img src="image/4.jpg" alt=""></li> <li> <img src="image/5.jpg" alt=""></li> <li> <img src="image/6.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;
}4. アニメーションを定義します。主に画像のグループを左に移動するための長さ
@keyframes picmove {
from {
transform: translate(0);
}
to {
transform: translate(-750px);
}
}5. マウスホバーとアニメーションの一時停止効果を追加
ul:hover {
animation-play-state: paused;
}6. 最後にoverflow:hiddenをnavに追加して超過した部分を非表示にします。これで、スクロール ピクチャ バーのセット全体が完了しました。
全体のコードは次のとおりです。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
nav {
width: 750px;
height: 170px;
border: 1px solid red;
margin: 100px auto;
overflow: hidden;
}
ul {
width: 200%;
height: 100%;
animation: picmove 5s linear infinite forwards;
}
@keyframes picmove {
from {
transform: translate(0);
}
to {
transform: translate(-750px);
}
}
img {
width: 250px;
height: 170px;
float: left;
}
ul:hover {
animation-play-state: paused;
}
</style>
</head>
<body>
<nav>
<ul>
<li><img src="image/1.jpg" alt=""></li>
<li><img src="image/2.jpg" alt=""></li>
<li><img src="image/3.jpg" alt=""></li>
<li><img src="image/4.jpg" alt=""></li>
<li><img src="image/5.jpg" alt=""></li>
<li><img src="image/6.jpg" alt=""></li>
</ul>
</nav>
</body>
</html>レンダリング:
以上がCSSで画像をスクロールする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。