ホームページ > 記事 > ウェブフロントエンド > CSS3でカルーセルグラフを実装するにはどうすればよいですか? CSS3でカルーセル画像を実装する方法
Web ページ上で、多くの写真が前後に切り替わる場所をよく見かけます。これはカルーセル画像の外観により、重要な情報を 1 つの場所に表示することができます。どうですか?カルーセルグラフはjsやcssで実現できます この記事ではcss3でカルーセルグラフの効果を実現する方法を紹介します。
CSS3 では、CSS3 アニメーション プロパティと @keyframes ルールを使用してカルーセル効果を実現できます。
アニメーション効果を実現するには、主に 2 つの部分で構成されます。
1. Flash アニメーションと同様のフレームを通じてアニメーションを宣言します。
2. アニメーション属性のキー フレームによって宣言されたアニメーションを呼び出します。
animation 属性は省略形の属性です (推奨ビデオ コース: css チュートリアル)
構文: アニメーション: 名前、期間、タイミング、関数、遅延、反復回数、方向。
アニメーションの属性値についてはここでは紹介しませんので、必要に応じてcssマニュアルを参照してください。
それでは、例を直接見てみましょう:
html:
<div id="container"> <div id="photo"> <img src="http://img.zcool.cn/community/0117e2571b8b246ac72538120dd8a4.jpg@1280w_1l_2o_100sh.jpg" /> <img src="http://img.zcool.cn/community/01b34f58eee017a8012049efcfaf50.jpg@1280w_1l_2o_100sh.jpg" /> <img src="http://img.zcool.cn/community/01c60259ac0f91a801211d25904e1f.jpg@1280w_1l_2o_100sh.jpg" /> </div> </div>
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; } }
説明:
表示コンテナのサイズは画像のサイズと同じです
floatを追加します画像に効果を与えるため、面倒なマージンを考慮する必要はありません。 問題
この例には 3 枚の画像しかないため、3 つのアニメーション ステージが追加されます。各ステージは、マージン左の値を増加させることで切り替え効果を実現します
設定されたアニメーション ステージ (たとえば、 as: 35%~60%) それはアニメーションの滞留部分であり、前段階の空き時間 (25%~35% など) はアニメーションの切り替え部分であり、各部分の長さを制御する必要があります。あなた自身。
この記事では、CSS カルーセル効果の実装について簡単に紹介します。CSS カルーセルの効果の詳細については、PHP 中国語 Web サイトの 特殊効果のダウンロード をご覧ください。
関連する推奨事項:
以上がCSS3でカルーセルグラフを実装するにはどうすればよいですか? CSS3でカルーセル画像を実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。