CSS3 はカルーセルアニメーションコードを実装します-CSSチュートリアル-php.cn

カルーセルアニメーションは実装が簡単です

現在、フロントエンドではユーザーインタラクションとエクスペリエンスにますます注目が集まっています。この記事のテーマであるカルーセルアニメーションなど、非常に一般的なアニメーションやエフェクトが数多くあります。これは、以前によく聞かれた用語「マーキー」と同じ効果があります。 CSS3 が登場する前は、アニメーションはすべて JavaScript で実装されていましたが、現在では完全に CSS3 を使用できるようになり、パフォーマンスが大幅に向上し、特にモバイル側での互換性も非常に優れています。

CSS3 アニメーションのパフォーマンスは、特にページに多くのアニメーションやタイマーがある場合に大幅に向上します。

html 構造:

CSS实现

今天

明天

后天

今天

ログイン後にコピー

ループ効果を実現するには、最後に繰り返し補助要素を追加する必要があることがわかります。

CSS コード:

// 轮播动画 @-webkit-keyframes marquee { 0% { -webkit-transform: translate3d(0, 0, 0); } 27% { -webkit-transform: translate3d(0, 0, 0); } 33% { -webkit-transform: translate3d(0, -100%, 0); } 60% { -webkit-transform: translate3d(0, -100%, 0); } 67% { -webkit-transform: translate3d(0, -200%, 0); } 94% { -webkit-transform: translate3d(0, -200%, 0); } 100% { -webkit-transform: translate3d(0, -300%, 0); } } @keyframes marquee { 0% { transform: translate3d(0, 0, 0); } /* 100/3 * (2s/2.5s) => 26.7% => 27% */ 27% { transform: translate3d(0, 0, 0); } /* 100/3 =>33.3 => 33% */ 33% { transform: translate3d(0, -100%, 0); } 60% { transform: translate3d(0, -100%, 0); } 67% { transform: translate3d(0, -200%, 0); } 94% { transform: translate3d(0, -200%, 0); } 100% { transform: translate3d(0, -300%, 0); } } .wrapper-css { width: 200px; height: 30px; margin: 10px; overflow: hidden; } .container-css { height: 30px; -webkit-animation: marquee 7.5s linear infinite;/* 2.5s(2s + 0.5s) * 3 => 7.5s */ animation: marquee 7.5s linear infinite; } .container-css p { width: 100%; height: 30px; margin: 0; line-height: 30px; font-size: 18px; }

ログイン後にコピー

上記のように、CSS3 を使用してアニメーションキーフレームを定義し、それをトランスフォームディスプレイスメントと組み合わせて、コンテナを移動してシームレスなカルーセルアニメーションを実現するには、主に以下に基づいてアニメーションキーフレームポイントを計算する必要があります。カルーセル要素

以上がCSS3 はカルーセルアニメーションコードを実装しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。