CSS3はカルーセル効果を実装します

CSS3は主にcss:background-positionとcss3:animationによってカルーセル画像を実装しています。そして、このカルーセルを実現するには、4枚の写真が横につながった写真が必要です。

注 (Internet Explorer 10、Firefox、Opera はアニメーション プロパティをサポートしています。Safari と Chrome は代替の -webkit-animation プロパティをサポートしています。)

HTML:

リーリー

CSS:

リーリー

animation 属性は JavaScript 構文の省略表現属性です: object.style.animation=" slide 8s Linear Infinite"、そのパラメーターは次のとおりです:

アニメ名	セレクターにバインドする必要があるキーフレーム名を指定します。 。
アニメーション期間	アニメーションが完了するまでにかかる時間を秒またはミリ秒で指定します。
アニメーションタイミング関数	アニメーションのスピードカーブを指定します。
アニメーション遅延	アニメーションが開始するまでの遅延を指定します。
アニメーション反復回数	アニメーションを再生する回数を指定します。
アニメーションディレクション	アニメーションを順番に逆再生するかどうかを指定します。

画像を 8 秒以内に移動させ、毎回 600 ピクセルずつ左に移動し、最後に元のポイントに戻ります。div の幅は 600 ピクセルで、画像が 1 つ収まる程度で、カルーセル効果が形成されます。