CSS3を使用して画像の自動回転効果を実現する方法（完全なコードが添付されています）-CSSチュートリアル-php.cn

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

坏嘻嘻

リリース： 2019-11-30 16:42:11

オリジナル

29180 人が閲覧しました

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

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

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

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

注

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

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

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

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

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

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

<div id="container">
    <div id="photo">
        <img  src="/static/imghw/default1.png"  data-src="1.png"  class="lazy"   / alt="CSS3を使用して画像の自動回転効果を実現する方法（完全なコードが添付されています）" >
        <img  src="/static/imghw/default1.png"  data-src="2.png"  class="lazy"   / alt="CSS3を使用して画像の自動回転効果を実現する方法（完全なコードが添付されています）" >
        <img  src="/static/imghw/default1.png"  data-src="3.png"  class="lazy"   / 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;
}
}