CSS を使用してシームレスなカルーセル切り替えを実現するにはどうすればよいですか?

シームレスなカルーセル切り替えを実現する Css メソッド: まず、アニメーション属性を使用して、セレクターにバインドされるキーフレームの名前、アニメーションの完了にかかる時間、アニメーションの速度曲線、およびアニメーションの再生回数、次に @keyframes ルールを使用してカルーセル アニメーションを作成し、各キーフレームでの画像の配置スタイルを指定します。

このチュートリアルの動作環境: Windows7 システム、CSS3 バージョンこの方法は、すべてのブランドのコンピューターに適しています。

(推奨チュートリアル: CSS ビデオ チュートリアル )

CSS3 を使用して実装: アニメーション属性 @keyframes ルールを使用

(カルーセルを 1 つずつ実装し、肉眼では 1 つの画像のみが表示されます)

HTML 部分は比較的単純で、2 つの div の下に複数の img タグがラップされています。シームレスなカルーセルを実現するには、次の点に注意してください。最初の画像。最後の画像と同じ;

<div class="out">
	<div class="imgs">
		<img  src="/static/imghw/default1.png"  data-src="img/beatuy.jpg"  class="lazy"  / alt="CSS を使用してシームレスなカルーセル切り替えを実現するにはどうすればよいですか?" >
		<img  src="/static/imghw/default1.png"  data-src="img/child.jpg"  class="lazy"  / alt="CSS を使用してシームレスなカルーセル切り替えを実現するにはどうすればよいですか?" >
		<img  src="/static/imghw/default1.png"  data-src="img/girl.jpg"  class="lazy"  / alt="CSS を使用してシームレスなカルーセル切り替えを実現するにはどうすればよいですか?" >
		<img  src="/static/imghw/default1.png"  data-src="img/milk.jpg"  class="lazy"  / alt="CSS を使用してシームレスなカルーセル切り替えを実現するにはどうすればよいですか?" >
		<img  src="/static/imghw/default1.png"  data-src="img/cup.jpg"  class="lazy"  / alt="CSS を使用してシームレスなカルーセル切り替えを実現するにはどうすればよいですか?" >
		<img  src="/static/imghw/default1.png"  data-src="img/dog.jpg"  class="lazy"  / alt="CSS を使用してシームレスなカルーセル切り替えを実現するにはどうすればよいですか?" >
		<img  src="/static/imghw/default1.png"  data-src="img/beatuy.jpg"  class="lazy"  / alt="CSS を使用してシームレスなカルーセル切り替えを実現するにはどうすればよいですか?" >
	</div>
</div>

最も外側の div は ovflow:hidden;position:相対で設定されます。最も外側の div はposition:relativeで設定されているため、内側の div を設定する必要があります位置:absolute; を使用すると、移動は親要素に対して相対的になります;

CSS コードは次のとおりです:

.out{
	width: 200px;
	height: 100px;
	overflow: hidden;
	position: relative;
}

.imgs {
	width: 1400px;
	height: 100px;
	position: absolute;
	animation: ppt 10s linear infinite;
}

img {
	float: left;
	width: 200px;
	height: 100px;
}

@keyframes ppt {
	0% {
		left: 0px
	}
	20% {
		left: -250px
	}
	40% {
		left: -500px
	}
	60% {
		left: -750px
	}
	80% {
		left: -1000px
	}
	100% {
		left: -1200px
	}
}

このようにして、画像を回転できます。

しかし、マウスをその上に置くと、画像はまだ回転しています。マウスを画像上に置いたときにカルーセルを停止したり、何らかの情報を表示したりする場合は、次のようにします。アニメーションのステータスを設定するには、「hover;」を追加する必要があります。コードは非常に単純です: 次のようにです。

.out:hover .imgs{
   animation-play-state:paused;
}

これにより、カルーセル効果が表示されます;

さらにプログラミング関連の知識については、

プログラミング学習 をご覧ください。 ！

以上がCSS を使用してシームレスなカルーセル切り替えを実現するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。