CSSでカルーセル効果を実現（コード付き）-CSSチュートリアル-php.cn

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

烟雨青岚

リリース： 2020-06-28 13:38:40

転載

25683 人が閲覧しました

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

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

理論的根拠

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

主なアイデア

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

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

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

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

注意事項

##カスタムアニメーションステージの各ステージのオフセット値アニメーションは画像サイズに関連しています
この記事の例では、最後の画像から最初の画像への切り替え効果はありません。1 つのアイデアは、最後の画像から最初の画像に切り替えることです。 one by one
HTML

<p id="container">
    <p id="photo">
        <img src="1.png" />
        <img src="2.png" />
        <img src="3.png" />
    </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% など)はアニメーションの切り替え部分です各部分の長さは自分で制御する必要があります

操作効果

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