ストリーマーボタンの効果を実現するCSS3アニメーション

CSS3 を学習する過程で、CSS3 属性を使用すると多くのクールな効果を簡単に実現できることが分かりました。アニメーションは、CSS3 アニメーション効果でよく使用される属性です。次に、このプロパティを使用して、マウスがボタン上にあるときにストリーマーで次のボタン効果を作成する方法を学びましょう。

ここに画像の説明を挿入

その前に、アニメーション属性の使い方について簡単に紹介しておきます。
アニメーション: [animation-name (オブジェクトに適用されたアニメーションの名前を取得または設定)] || [animation-duration (オブジェクトアニメーションの継続時間を取得または設定)] || [animation-timing-function (オブジェクトアニメーションの遷移タイプを取得または設定)] || [animation-delay (オブジェクトアニメーションの遅延時間を取得または設定)] || [animation-iteration-count (オブジェクトアニメーションのループ回数を取得または設定)] || [animation-direction (ループ中にオブジェクトアニメーションが逆方向に移動するかどうかを取得または設定)]
ステップ 1 : div の幅、高さ、丸い境界線を設定して、角丸長方形にします。
ステップ 2 : 背景色を 3 色のグラデーションに設定し (フロー中に色が混ざらないように、最後の色は最初の色と同じにする必要があります)、背景サイズを 400% に設定します。メインコードは次のとおりです。

背景画像: 線形グラデーション(左へ、#EAD6EE、#A0F1EA、rgb(124、241、241)、#e3a5f0、#EAD6EE);
    背景サイズ: 400%;

分析: 現在、背景は 3 色のグラデーションになっており、div のサイズの 4 倍であるため、div には 1 色のみが表示されます。フレームアニメーション効果を使用して背景の動きを制御し、アニメーション属性を使用して背景を連続的に流すことができます。

ここに画像の説明を挿入

ステップ 3 : フレームアニメーションを使用して、背景の配置の水平方向の動きを制御します。 (@keyframes 機能: アニメーションを定義します。シンプルなアニメーションでは、from と to のキーワードを直接使用できます。複雑なアニメーションでは、0%~100% を使用して、セグメント内の対応するアニメーション効果、つまり、ある状態から別の状態への遷移を設定できます)

@keyframes 実行{
            100%{
                背景位置: 400% 0px;
            }
        }

次に、疑似クラスhoverを使用して、マウスが上に移動したときにアニメーション効果を実現します。
擬似クラスのメインコード

@keyframes 実行{
            100%{
                背景位置: 400% 0px;
            }
        }
        .div2:ホバー{
            アニメーション: 4 秒間線形実行、0 秒間無限実行。
        }

ケースの完全なコード:

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
    <メタ文字セット="UTF-8">
    <title>ドキュメント</title>
    <スタイル>
        .div2{
            位置:絶対;
            左: calc(50% - 150px); 
            上: calc(50% - 150px); 
            幅: 300ピクセル;
            高さ: 100px;
            境界線の半径: 50px;
            テキスト配置: 中央;
            背景色:水色;
            行の高さ: 100px;
            背景画像: 線形グラデーション(左へ、#EAD6EE、#A0F1EA、rgb(124、241、241)、#e3a5f0、#EAD6EE);
            背景サイズ: 400%; 
        }
        @keyframes 実行{
            100%{
                背景位置: 400% 0px;
            }
        }
        .div2:ホバー{
            アニメーション: 4 秒間線形実行、0 秒間無限実行。
        }
    </スタイル>
</head>
<本文>
    <div class="div2">
        さあ行こう
    </div>
</本文>
</html>

シンプルなCSS3ストリーマーアニメーション効果を実現

CSS3 でアニメーションを使用してストリーマーボタン効果を実現する方法については、これで終わりです。CSS3 アニメーションストリーマーボタンに関する関連コンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

<<: CentOS 7にDockerをインストールする

>>: 発生したブラウザの互換性の問題と解決策（推奨）について