ホームページ >ウェブフロントエンド >CSSチュートリアル >CSS3 アニメーションはシンプルなスライド カルーセル効果を実装します
この記事では主に、単純なスライド カルーセル効果を実装するための CSS3 アニメーションを詳細に紹介します。興味のある方は参考にしてください。
CSS3 には、デフォルトのブラウザを呼び出す代わりに、ハードウェア GPU をトリガーできる個別の機能があります。レンダリング用のエンジン;
しかし、多くの属性はデフォルトではハードウェア アクセラレーションを有効にしません;トリガー条件は必須であり、最も単純なトリガー条件の 1 つは 3D 属性 (Z 軸上の操作) を使用することです
レンダリング
コード
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS3幻灯片</title> <style type="text/css" media="screen"> .items { width: 280px; height: 150px; border: 1px solid #ddd; box-sizing: border-box; border-radius:10px; background-size: cover; -webkit-transform: translateZ(0); transform: translateZ(0); background-repeat: no-repeat; -webkit-animation: slider 15s linear infinite alternate; animation: slider 15s linear infinite alternate; -webkit-transform-origin: center center; transform-origin: center center; } @-webkit-keyframes slider { 0% { background-image: url(1.jpg) ; } 25% { background-image: url(2.jpg) ; } 50% { background-image: url(3.jpg) ; } 75% { background-image: url(4.jpg); } 100% { background-image: url(5.jpg); } } @keyframes slider { 0% { background-image: url(1.jpg) ; } 25% { background-image: url(2.jpg) ; } 50% { background-image: url(3.jpg) ; } 75% { background-image: url(4.jpg); } 100% { background-image: url(5.jpg); } } </style> </head> <body> <p class="slider"> <p class="items"></p> </p> </body> </html>
以上がこの記事の全内容です。その他の関連コンテンツについては、PHP 中国語 Web サイトをご覧ください。
関連する推奨事項:
フレームごとのアニメーション効果を実現するための CSS3 アニメーションについて
以上がCSS3 アニメーションはシンプルなスライド カルーセル効果を実装しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。