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

純粋な 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における時刻日付型と文字列型の選択について

推薦する

NavicatでMySqlスケジュールタスクを作成する方法の詳細な説明

Navicat で MySql スケジュールタスクを作成する詳細な説明イベントは、MySQL が特定...

nginxのリソースキャッシュ設定の詳細な説明

私はずっとキャッシュについて学びたいと思っていました。結局のところ、キャッシュはフロントエンドのパフ...

docker で Apollo をデプロイする詳細なチュートリアル

1. はじめにここでは apollo について詳しく説明しません。公式サイト https://git...

JS 継承の詳細

目次序文準備する要約する継承方法プロトタイプ継承プロトタイプチェーン継承コンストラクタの借用(クラス...

MySQL インストール図の概要

MySQL 5.5 のインストールと設定方法のグラフィックチュートリアルMySQL 5.5 のインス...

CSS のマージンの崩壊問題を解決する方法

まず、マージン崩壊が発生する 3 つの状況を見てみましょう。 1. 隣接する 2 つのブロックレベル...

MySql でメモリ使用量を削減する方法の詳細な説明

序文デフォルトでは、MySQL はデータベース クエリ データをキャッシュするために大きなメモリ ブ...

HTML テーブルタグチュートリアル (13): 内部境界スタイル属性ルール

RULES を使用すると、テーブルの内部境界のスタイルを制御できます。基本的な構文<TABLE...

MySQL InnoDB インデックス拡張の詳細な説明

インデックス拡張: InnoDB は、プライマリ キー列をそのインデックスに追加することで、各セカン...

Docker CPU 制限の実装

1. --cpu=<値> 1) コンテナが使用できるCPUリソースの量を指定しますが、コ...

MySQL 5.7 の /etc/my.cnf パラメータの紹介

以下は、mysql 5.7 の /etc/my.cnf の一般的なパラメータの一部です。これらを自分...

Linuxのpasswdコマンドの使用

1. コマンドの紹介passwd コマンドは、ユーザー パスワード、アカウント ロック、パスワードの...

Vite2とVue3を使用したウェブサイトの国際化を実現するプロセス全体

目次序文vue-i18nをインストールするロケールの設定getLangs.js の実装i18nインス...

レスポンシブ Web デザイン手法を実装し、ウォーターフォール モデルに別れを告げる 5 つのステップ (グラフィック チュートリアル)

次の Web デザイン プロジェクトはレスポンシブにする必要があると上司をようやく納得させることがで...

mysql 5.7.5 m15 winx64.zip インストール チュートリアル

win7 64 ビットで mysql-5.7.5-m15-winx64 をインストールして構成する方...