CSS3を使用して画像の自動回転効果を実現する方法（完全なコードが添付されています）

この記事は、css3 を使用して画像のカルーセル効果を実現する方法を紹介し、具体的な手順に焦点を当てています。この記事の内容は、皆さんに何かを得ることができれば幸いです。

Web を閲覧していると、画像カルーセルと呼ばれる特殊効果に遭遇します。これは、同じ位置にある異なる画像が時間の変化に応じてループ再生され、エフェクトに似た一種のスライド ショーを実現します。では、Web 開発のプロセスで画像のカルーセル効果を実装するにはどうすればよいでしょうか?この記事では、css3 を使用して画像カルーセル効果を実現する方法を説明します。

css3 を使用してカルーセル効果を実現する主なアイデア

同じサイズの複数の画像を用意します。同じ位置に配置し、div コンテナ内に水平に配置し、div コンテナの上に表示コンテナを設定します。表示コンテナのサイズは画像のサイズと同じです。最後に、カスタム アニメーションを画像コンテナに追加します。 、アニメーションのさまざまな段階で増分オフセット値を設定します。

注

アニメーション効果は、切り替えと滞在の 2 つの部分に分かれています。

アニメーションのオフセット値は画像サイズに関係します。

css3 を使用してカルーセル効果を実現する原則

まず、表示コンテナのサイズが次のとおりであることを確認する必要があります。画像のサイズと同じにし、フロート効果を追加します。次に、挿入する画像の数を決定し、各画像にアニメーション ステージを設定します。各ステージでは、キーフレームを使用してマージン左の増加値を設定することで切り替え効果を実現します。

css3 を使用して画像カルーセル効果を実装する手順 (コード)

ステップ 1: HTML を使用して画像を追加する

<div id="container">
    <div id="photo">
        <img  src="1.png" / alt="CSS3を使用して画像の自動回転効果を実現する方法（完全なコードが添付されています）" >
        <img  src="2.png" / alt="CSS3を使用して画像の自動回転効果を実現する方法（完全なコードが添付されています）" >
        <img  src="3.png" / alt="CSS3を使用して画像の自動回転効果を実現する方法（完全なコードが添付されています）" >
    </div>
</div>

#ステップ 2: css3 を使用してアニメーション ステージを設定する##

#container {
width: 400px;
height: 300px;
overflow: hidden;
}
#photo {
width: 1200px;
animation: switch 5s ease-out infinite;
}
#photo > img {
float: left;
width: 400px;
height: 300px;
}
@keyframes switch {
0%, 25% {
margin-left: 0;
}
35%, 60% {
margin-left: -400px;
}
70%, 100% {
margin-left: -800px;
}
}

#画像カルーセルのレンダリング

#さらにクールな CSS3 および JavaScript 特殊効果コードは、

js 特殊効果コレクション

で入手できます。

以上がCSS3を使用して画像の自動回転効果を実現する方法（完全なコードが添付されています）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。