BinaryDevelop
  1. ホーム
  2. Web制作
  3. CSS

[css3]CSS3アニメーションによる光のボタンの流れの効果

2022-01-14 20:01:19

css3を学んでいく過程で、css3のプロパティを使って簡単に実現できる格好いい効果をたくさん見つけました。animationはcss3のアニメーション効果でよく使われるプロパティです。このプロパティを使って、次のようなマウスオーバーボタンをストリームボタン効果で作る方法を学んでいきましょう〜。

その前に、animationプロパティの使い方を簡単に紹介します。
アニメーション [ animation-name(オブジェクトに適用されるアニメーションの名前を取得または設定) ]。|| [ animation-duration(retrieve or set the duration of the object's animation) ]のように、オブジェクトのアニメーションの期間を設定します。|| [ animation-timing-function(retrieve or set the transition type of the object's animation) ]（オブジェクトのアニメーションのトランジションタイプを取得または設定します。|| [ animation-delay(アニメーションの遅延時間を取得・設定)] || [animation-iteration-count (アニメーションのループ回数を取得・設定)] || [animation-direction (ループ内のアニメーションを反転させるか設定)]] 。
最初のステップ : divの幅と高さを設定し、角を丸めた矩形にします。
ステップ2 : 背景色を3色のグラデーションにし（フローが色に引っかからないように、最後の色は最初の色と同じにする必要があります）、背景サイズを400%に設定し、以下のメインコードで設定します。 

background-image: linear-gradient(to left , #EAD6EE,#A0F1EA,rgb(124, 241, 241),#e3a5f0,#EAD6EE);
    background-size: 400%;

解析する。今すぐ背景はグラデーションのサイズの3色で、divの4倍なので、divは1色、背景の動きを制御するフレームアニメーション効果を使用して、プラスアニメーションのプロパティは、常に流れることができます〜を表示します。

ステップ3 : フレームアニメーションを使用して、背景の位置決めの水平方向の動きを制御します。(@keyframes role: アニメーションを定義します。単純なアニメーションは from と to のキーワードで直接使用でき、複雑なものは 0% から 100% を使用し、対応するアニメーション効果をセグメントで設定します（ある状態から別の状態への移行など）。 

@keyframes run{
            100%{
                background-position: 400% 0px;
            }
        }

そして、擬似クラスのhoverを使って、マウスオーバー時のアニメーション効果を実現します〜。
擬似クラスのメインコード 

@keyframes run{
            100%{
                background-position: 400% 0px;
            }
        }
        .div2:hover{
            animation: run 4s linear 0s infinite;
        }

ケースのフルコード。 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .div2{
            position:absolute;
            left: calc(50% - 150px); 
            top: calc(50% - 150px); 
            width: 300px;
            height: 100px;
            border-radius: 50px;
            text-align: center;
            background-color:aqua;
            line-height: 100px;
            background-image: linear-gradient(to left , #EAD6EE,#A0F1EA,rgb(124, 241, 241),#e3a5f0,#EAD6EE);
            background-size: 400%; 
        }
        @keyframes run{
            100%{
                background-position: 400% 0px;
            }
        }
        .div2:hover{
            animation: run 4s linear 0s infinite;
        }
    </style>
</head>
<body>
    <div class="div2">
        Let's Go
    </div>
</body>
</html>

シンプルなcss3フローアニメーション効果が得られます。

CSS3のアニメーションで流れるようなライトボタン効果を実現する記事はこれで終わりです、もっと関連するCSS3アニメーション流れるようなライトボタンの内容は、スクリプトハウスの過去の記事を検索するか、以下の関連記事を引き続きご覧ください、今後もスクリプトハウスを応援よろしくお願いします!

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します