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

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

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

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

ブートストラップ画像カルーセル関数の実装

画像カルーセルのスライドショー効果を実装するjQuery

以上がCSS3でカルーセルグラフを実装するにはどうすればよいですか? CSS3でカルーセル画像を実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。