この記事では、主に、円形のダイナミックな光る特殊効果アニメーションを実現するための純粋な 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」です。 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 スケジュールタスクを作成する詳細な説明イベントは、MySQL が特定...
私はずっとキャッシュについて学びたいと思っていました。結局のところ、キャッシュはフロントエンドのパフ...
1. はじめにここでは apollo について詳しく説明しません。公式サイト https://git...
目次序文準備する要約する継承方法プロトタイプ継承プロトタイプチェーン継承コンストラクタの借用(クラス...
MySQL 5.5 のインストールと設定方法のグラフィックチュートリアルMySQL 5.5 のインス...
まず、マージン崩壊が発生する 3 つの状況を見てみましょう。 1. 隣接する 2 つのブロックレベル...
序文デフォルトでは、MySQL はデータベース クエリ データをキャッシュするために大きなメモリ ブ...
RULES を使用すると、テーブルの内部境界のスタイルを制御できます。基本的な構文<TABLE...
インデックス拡張: InnoDB は、プライマリ キー列をそのインデックスに追加することで、各セカン...
1. --cpu=<値> 1) コンテナが使用できるCPUリソースの量を指定しますが、コ...
以下は、mysql 5.7 の /etc/my.cnf の一般的なパラメータの一部です。これらを自分...
1. コマンドの紹介passwd コマンドは、ユーザー パスワード、アカウント ロック、パスワードの...
目次序文vue-i18nをインストールするロケールの設定getLangs.js の実装i18nインス...
次の Web デザイン プロジェクトはレスポンシブにする必要があると上司をようやく納得させることがで...
win7 64 ビットで mysql-5.7.5-m15-winx64 をインストールして構成する方...