純粋な CSS3 を使用して、円の動的な光る特殊効果アニメーションを実装するためのサンプルコード

この記事では、主に、円形のダイナミックな光る特殊効果アニメーションを実現するための純粋な CSS3 のサンプルコードを紹介し、皆さんと共有します。詳細は次のとおりです。

効果画像:

コード：

<!DOCTYPE HTML>
<html>
<ヘッド>
    <title>純粋な CSS3 で、動的な円形の特殊効果アニメーションを実現</title>
    <スタイル>
        体 {
            背景色: #000000;
        }
 
        @keyframes きらめき {
            0% {
                不透明度: 0.2;
                変換: スケール(1);
            }
 
            50% {
                不透明度: 0.5;
                変換: スケール(1.12);
            }
 
            100% {
                不透明度: 0.2;
                変換: スケール(1);
            }
        }
 
        .circle-wrap {
            位置: 絶対;
            左: 100px;
            上: 100px;
        }
 
        。丸 {
            位置: 相対的;
            幅: 24px;
            高さ: 24px;
        }
 
        .small-circle {
            境界線の半径: 50%;
            幅: 12px;
            高さ: 12px;
            背景: #FF0033;
            位置: 絶対;
        }
 
        .big-circle {
            位置: 絶対;
            上: -6px;
            左: -6px;
            幅: 100%;
            高さ: 100%;
            境界線の半径: 50%;
            背景: #FF0033;
            アニメーション: きらきら光る 1 秒の無限イーズインアウト;
            アニメーション塗りつぶしモード: 両方;
        }
 
        @keyframesスケール{
            0% {
                変換: スケール(1)
            }
 
            50%、
            75% {
                変換: スケール(3)
            }
 
            78%、
            100% {
                不透明度: 0
            }
        }
 
        @keyframes スケール {
            0% {
                変換: スケール(1)
            }
 
            50%、
            75% {
                変換: スケール(2)
            }
 
            78%、
            100% {
                不透明度: 0
            }
        }
 
        .smallcircle2 {
            位置: 絶対;
            幅: 12px;
            高さ: 12px;
            背景色: #ffffff;
            境界線の半径: 50%;
            上: 100px;
            左: 200px;
        }
 
        .smallcircle2:前{
            コンテンツ： '';
            表示: ブロック;
            幅: 12px;
            高さ: 12px;
            境界線の半径: 50%;
            不透明度: .4;
            背景色: #ffffff;
            アニメーション: スケール 1s 無限大 cubic-bezier(0, 0, .49, 1.02);
        }
 
        .bigcircle2 {
            位置: 絶対;
            幅: 12px;
            高さ: 12px;
            境界線の半径: 50%;
            不透明度: .4;
            背景色: #ffffff;
            上: 100px;
            左: 200px;
            アニメーション: スケール 1s 無限 cubic-bezier(0, 0, .49, 1.02);
        }
 
        @keyframesスケールなし{
            0% {
                変換: スケール(1)
            }
 
            50%、
            75% {
                変換: スケール(3)
            }
 
            78%、
            100% {
                不透明度: 0
            }
        }
 
        。アイテム {
            位置: 絶対;
            幅: 14px;
            高さ: 14px;
            背景色: #FFFF00;
            境界線の半径: 50%;
            上: 150px;
            左: 100px;
        }
 
        .item:before {
            コンテンツ： '';
            表示: ブロック;
            幅: 14px;
            高さ: 14px;
            境界線の半径: 50%;
            不透明度: .7;
            背景色: #FFFF00;
            アニメーション: スケールなし 1s 無限 cubic-bezier(0, 0, .49, 1.02);
        }
    </スタイル>
</head>
<本文>
    <div class="circle-wrap">
        <div class="circle">
            <div class="big-circle"></div>
            <div class="small-circle"></div>
        </div>
    </div>
    <div class="smallcircle2"></div>
    <div class="bigcircle2"></div>
    <div class="item"></div>
</本文>
</html>

この効果の具体的な実装は主にCSS3アニメーションを使用する。

8 つのプロパティがあります:

animation-name は、@keyframes アニメーションの名前を指定します。
アニメーションの名前を定義するために使用されます。
要素に複数のアニメーションを設定したい場合は、それらをカンマ「,」でリストするだけです。

アニメーション期間アニメーション期間

要素のアニメーションの継続時間を秒（s）またはミリ秒（ms）で指定するために使用されます。デフォルト値は0です。

animation-timing-function は、アニメーションの速度曲線を指定します。デフォルトは「ease」です。
linear は、同じ速度で開始および終了する遷移効果を指定します (cubic-bezier(0,0,1,1) に相当)。 easy は、ゆっくり始まり、その後加速し、そしてゆっくり終わる遷移効果を指定します (cubic-bezier(0.25,0.1,0.25,1))。
easy-in は、ゆっくり始まる遷移効果を指定します (cubic-bezier(0.42,0,1,1) に相当)。
easy-out は、ゆっくり終了する遷移効果を指定します (cubic-bezier(0,0,0.58,1) に相当)。
easy-in-out は、ゆっくりと開始および終了する遷移効果を指定します (cubic-bezier(0.42,0,0.58,1) に相当)。
cubic-bezier(n,n,n,n) は、cubic-bezier 関数で独自の値を定義します。可能な値は0から1までの数値です。

animation-delay はアニメーションがいつ開始するかを指定します。デフォルトは0です。負の値が許可され、アニメーションは2秒スキップしてアニメーションサイクルに入ります。つまり、2秒のアニメーションから始まります。

animation-iteration-count はアニメーションを再生する回数を指定します。デフォルト値は1です

animation-direction は、次のサイクルでアニメーションを逆方向に再生するかどうかを指定します。デフォルトは「通常」です。

animation-fill-mode は、アニメーション効果がアニメーションの再生前か再生後に表示されるかどうかを指定します。

animation-play-state は、アニメーションが実行中か一時停止中かを指定します。デフォルトは「実行中」です。

要するに、

アニメーション: 名前 期間 タイミング関数 遅延 反復回数 方向 塗りつぶしモード 再生状態

原文: https://blog.csdn.net/qq_34576876/article/details/95532946

https://blog.csdn.net/weixin_42541698/article/details/102686976

これで、純粋な CSS3 を使用して動的に光る円の特殊効果アニメーションを実装するためのサンプルコードに関するこの記事は終了です。CSS3 動的に光る円の関連コンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM を応援してください。

<<: HTMLは正規表現を使用してテーブルの例をテストします

>>: MySQLにおける時刻日付型と文字列型の選択について