CSSでカルーセル効果を実現（コード付き）

#カルーセル効果を実現するための CSS (コード付き)

理論的根拠

CSS3 アニメーション プロパティと @keyframes ルール

主なアイデア

1. 同じサイズの画像を複数用意します

2 、表示する画像を画像コンテナ内に横に配置します。

3. 画像コンテナの外側に表示コンテナを追加します。表示コンテナのサイズは画像のサイズになります。

#4. 追加カスタム アニメーションを画像コンテナーに追加し、アニメーションのさまざまな段階で増分オフセット値を設定します。

注意事項

アニメーション効果は次のとおりです。切り替えと滞在の 2 つの部分に分かれています
カスタム アニメーション ステージはピクチャの数に関係します

• ##カスタム アニメーション ステージの各ステージのオフセット値アニメーションは画像サイズに関連しています

• この記事の例では、最後の画像から最初の画像への切り替え効果はありません。1 つのアイデアは、最後の画像から最初の画像に切り替えることです。 one by one

• HTML

<p id="container">
    <p id="photo">
        <img  src="/static/imghwm/default1.png"  data-src="1.png"  class="lazy"   / alt="CSSでカルーセル効果を実現（コード付き）" >
        <img  src="/static/imghwm/default1.png"  data-src="2.png"  class="lazy"   / alt="CSSでカルーセル効果を実現（コード付き）" >
        <img  src="/static/imghwm/default1.png"  data-src="3.png"  class="lazy"   / alt="CSSでカルーセル効果を実現（コード付き）" >
    </p>
</p>

分析:ここでは 3 つの img 要素が作成されます。img 要素の外側には画像コンテナがあり、外側には画像コンテナは表示コンテナです。

CSS

#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;
	}
}

分析:

1. 表示コンテナのサイズは画像のサイズと一致します

2. 画像にフロート効果を追加します 面倒なマージンの問題を考慮する必要はありません

3. この例では写真が 3 枚しかないため、アニメーション ステージが 3 つ追加されます。増加するマージン左の値

4. 設定されたアニメーション ステージ (35% ～ 60% など) はアニメーション滞在部分であり、その前のステージの自由時間 (25% ～ 35% など)はアニメーションの切り替え部分です 各部分の長さは自分で制御する必要があります

操作効果

皆さんありがとうございました読んでいただければ幸いです。

この記事は、https://blog.csdn.net/u011848617/article/details/80468463

推奨チュートリアル: 「

CSS チュートリアル

」## から転載されました。 #

以上がCSSでカルーセル効果を実現（コード付き）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。