ホームページ > 記事 > ウェブフロントエンド > CSS3でカルーセルグラフを実装するにはどうすればよいですか? CSS3でカルーセル画像を実装する方法

CSS3でカルーセルグラフを実装するにはどうすればよいですか? CSS3でカルーセル画像を実装する方法

不言オリジナル: 2018-09-06 17:12:064255ブラウズ

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でカルーセル画像を実装する方法

関連記事