アニメーション属性はカルーセル メソッドを直接実装します。

今回はアニメーション属性を使ってカルーセルを直接実装する方法をお届けします。カルーセルを実装するためのアニメーション属性の注意点とは何ですか。実際のケースを見てみましょう。

アニメーションの紹介:

CSS3 のアニメーション属性を使用して、キー フレームを制御することでアニメーションの各ステップを制御し、Flash アニメーションと同様に、より複雑なアニメーション効果を実現できます。アニメーションによって実現されるアニメーション効果は主に 2 つの部分で構成されます:

1) Flash アニメーションと同様のフレームを通じてアニメーションを宣言します。

2) アニメーション属性のキー フレームによって宣言されたアニメーションを呼び出します。

アニメーション属性値:

アニメーション属性は短縮属性です

構文: アニメーション: 名前、期間、タイミング-関数、遅延、繰り返し-数

方向;

アニメーションは、6 つのアニメーション属性を設定します:

animation-name: セレクターにバインドする必要があるキーフレーム名を指定します。値:

none: (デフォルト) アニメーション効果を指定しません (カスケードからのアニメーションをオーバーライドするために使用できます)。

keyframename: セレクターにバインドする必要があるキーフレームの名前を指定します。

animation-duration: アニメーションが完了するまでにかかる時間を秒またはミリ秒で指定します。値:

time: アニメーションが完了するまでにかかる時間を指定します。デフォルト値は 0 で、アニメーション効果がないことを意味します。

animation-timing-function: アニメーションのスピードカーブを指定します。値:

緩和: デフォルト。アニメーションは遅い速度で始まり、その後速度が上がり、最後に遅くなります。

リニア: アニメーションの速度は最初から最後まで同じです。

イーズイン: アニメーションは低速で始まります。

イーズアウト: アニメーションは低速で終了します。

イーズインアウト: アニメーションは低速で開始および終了します。

cubic-bezier(n,n,n,n): cubic-bezier 関数で独自の値を定義します。取り得る値は0から1までの数値です。

animation-delay: アニメーションが開始するまでの遅延を指定します。値:

time: (オプション) アニメーションを開始するまでの待機時間を秒またはミリ秒で定義します。デフォルト値は 0 です。

animation-iteration-count: アニメーションを再生する回数を指定します。値:

n: アニメーションの再生回数を定義する値。

infinite: アニメーションを無限に再生することを指定します。

animation-direction: アニメーションを順番に逆方向に再生するかどうかを指定します。値:

normal: デフォルト値。アニメーションは正常に再生されるはずです。

代替: アニメーションは順番に逆方向に再生されます。

アニメーションアニメーションカルーセル画像

nbsp;html>


    <meta>
    <title>图片轮换</title>
    <style>
        p,img{
            margin: 0;
            padding: 0;
        }
        .p_first{
            width: 1000px;
            height: 300px;
            margin-top: 100px;
            margin-left: 250px;
            overflow: hidden;
        }
        .p_second{
            width: 4000px;
            position: relative;
            animation: myimg 12s linear infinite normal; 
        }
        @keyframes myimg{
            0{
                left: 0;
            }
            5%{
                left: 0;
            }
            30%{
                left: -1000px;
            }
            35%{
                left: -1000px;
            }
            60%{
                left: -2000px;
            }
            65%{
                left: -2000px;
            }
            95%{
                left: -3000px;
            }
            100%{
                left: -3000px;
            }
        }
    </style>


    <p>
        </p><p>
            <img  src="/static/imghwm/default1.png" data-src="images/011-1.jpg" class="lazy" alt="アニメーション属性はカルーセル メソッドを直接実装します。" ><img  src="/static/imghwm/default1.png" data-src="images/011-2.jpg" class="lazy" alt="アニメーション属性はカルーセル メソッドを直接実装します。" ><img  src="/static/imghwm/default1.png" data-src="images/011-3.jpg" class="lazy" alt="アニメーション属性はカルーセル メソッドを直接実装します。" ><img  src="/static/imghwm/default1.png" data-src="images/011-1.jpg" class="lazy" alt="アニメーション属性はカルーセル メソッドを直接実装します。" >
        </p>
    

画像タグは同じ行に配置する必要があります。そうしないと、画像の間に隙間ができます。

この記事の事例を読んだ後、あなたはその方法をマスターしたと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

CSS3 でのポインターイベントの使用の詳細な説明

focus-within の使用の詳細な説明

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