サラウンドリフレクションロード効果を実現するHTML+CSS

この記事では、主に html + css を使用してサラウンドリフレクションローディングエフェクトを実装する方法について説明します。

まず効果を見てみましょう (完全なコードは下部にあります):

ここに画像の説明を挿入

実装（効果を見ながら段階的に記述できます）：

※ 最初に初期化（直接コピー）：

 *{
            マージン: 0;
            パディング: 0;
            ボックスのサイズ: 境界線ボックス;
        }
 体{
            高さ：100vh;
            ディスプレイ: フレックス;
            コンテンツの中央揃え: 中央;
            アイテムの位置を中央揃えにします。
            背景色: rgb(7, 15, 26);
        }

フレックスレイアウトでは、子要素を中央に揃えます。

1. タグを定義します。

<div class="コンテナ">
        <span>読み込み中...</span>
        <div class="circle">
            <div class="リング"></div>
        </div>
    </div>

.container は最下位のボックスです。
span はテキストです。
.circle は下部の円形ボックスです。
.ring は青いリングです。

2. .containerのCSSスタイル:

。容器{
            位置: 相対的;
            高さ: 150px;
            幅: 250ピクセル;
            -webkit-box-reflect:below 1px linear-gradient(transparent,rgb(7, 15, 26));
        }

-webkit-box-reflect: このプロパティは反射効果を実現できます。詳細。

3. .circle の CSS スタイル、アニメーション部分は一時的にコメントアウトできます。

。丸{
            位置: 相対的;
            マージン: 0 自動;
            高さ: 150px;
            幅: 150ピクセル;
            背景色: rgb(13, 10, 37);
            境界線の半径: 50%;
            アニメーション: zhuan 2s linear infinite;
        }
        @keyframes zhuan{
            0%{ 
               
                変換: 回転(0度);
            }
            100%{
                
                 変換: 回転(360度);
            }
        }

マージン: 0 自動; 中央揃え。
border-radius: 50%; 角度の半径。
animation: zhuan 2s linear infinite; アニメーションを設定して回転させます。
transform: rotate(…deg); 回転角度。

4. .circle をカバーする、背景と同じ色の小さな円である double 疑似クラスを定義します。

.circle::after{
            コンテンツ： '';
            位置: 絶対;
            上: 10px;
            左: 10px;
            右: 10px;
            下: 10px;
            背景色: rgb(7, 15, 26);
            境界線の半径: 50%;
        }

5. 青いリング効果を定義します。手順 4 の小さな円で覆われているため、青いリングを取得するには、グラデーションの青い円を直接定義できます。

。指輪{
            位置: 絶対;
            上: 0;
            左: 0;
            幅: 75px;
            高さ: 150px;
            背景画像: 線形グラデーション(180度、RGB(22, 121, 252)、透明80%);
            境界線の半径: 75px 0 0 75px;
            
        }

background-image: linear-gradient(180deg,rgb(22, 121, 252) ,transparent 80%); グラデーションカラー、最初は青、次に透明色に変化します。

6. リング上の小さな光るボールを定義します。

.ring::after{
            コンテンツ： '';
            位置: 絶対;
            右: -5px;
            上: -2.5px;
            幅: 15px;
            高さ: 15px;
            背景色: rgb(40, 124, 202);
            ボックスシャドウ: 0 0 5px rgb(40, 151, 202),
            0 0 10px rgb(40, 124, 202),
            0 0 20px rgb(40, 124, 202),
            0 0 30px rgb(40, 124, 202),
            0 0 40px rgb(40, 124, 202),
            0 0 50px rgb(40, 124, 202),
            0 0 60px rgb(40, 124, 202),
            0 0 60px rgb(40, 124, 202);
            境界線の半径: 50%;
            zインデックス: 1;
            
        }

box-shadow: 影。
z-index: 1; 最上位レイヤーに表示されます。

7. テキストの読み込みを定義します。

.コンテナ>スパン{
            位置: 絶対;
            左: 50%;
            上位: 50%;
            変換: translate(-50%,-50%);
            色: rgb(20, 129, 202);
            テキストシャドウ: 0 0 10px rgb(20, 129, 202),
            0 0 30px rgb(20, 129, 202),
            0 0 60px rgb(20, 129, 202),
            0 0 100px rgb(20, 129, 202);
            フォントサイズ: 18px;
            zインデックス: 1;
       
        }

左: 50%;
上位: 50%;
transform: translate(-50%,-50%); 中央揃え。
text-shadow: テキストの影。

完全なコード:

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
    <メタ文字セット="UTF-8">
    <meta http-equiv="X-UA-compatible" content="IE=edge">
    <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
    <title>ドキュメント</title>
    <スタイル>
        *{
            マージン: 0;
            パディング: 0;
            ボックスのサイズ: 境界線ボックス;
        }
        体{
            高さ：100vh;
            ディスプレイ: フレックス;
            コンテンツの中央揃え: 中央;
            アイテムの位置を中央揃えにします。
            背景色: rgb(7, 15, 26);
        }
        。容器{
            位置: 相対的;
            高さ: 150px;
            幅: 250ピクセル;
            -webkit-box-reflect:below 1px linear-gradient(transparent,rgb(7, 15, 26));
        }
        .コンテナ>スパン{
            位置: 絶対;
            左: 50%;
            上位: 50%;
            変換: translate(-50%,-50%);
            色: rgb(20, 129, 202);
            テキストシャドウ: 0 0 10px rgb(20, 129, 202),
            0 0 30px rgb(20, 129, 202),
            0 0 60px rgb(20, 129, 202),
            0 0 100px rgb(20, 129, 202);
            フォントサイズ: 18px;
            zインデックス: 1;
       
        }     
        。丸{
            位置: 相対的;
            マージン: 0 自動;
            高さ: 150px;
            幅: 150ピクセル;
            背景色: rgb(13, 10, 37);
            境界線の半径: 50%;
            アニメーション: zhuan 2s linear infinite;
        }
        @keyframes zhuan{
            0%{ 
               
                変換: 回転(0度);
            }
            100%{
                
                 変換: 回転(360度);
            }
        }
        .circle::after{
            コンテンツ： '';
            位置: 絶対;
            上: 10px;
            左: 10px;
            右: 10px;
            下: 10px;
            背景色: rgb(7, 15, 26);
            境界線の半径: 50%;
        }
        
        。指輪{
            位置: 絶対;
            上: 0;
            左: 0;
            幅: 75px;
            高さ: 150px;
            背景画像: 線形グラデーション(180度、RGB(22, 121, 252)、透明80%);
            境界線の半径: 75px 0 0 75px;
            
        }
        
        .ring::after{
            コンテンツ： '';
            位置: 絶対;
            右: -5px;
            上: -2.5px;
            幅: 15px;
            高さ: 15px;
            背景色: rgb(40, 124, 202);
            ボックスシャドウ: 0 0 5px rgb(40, 151, 202),
            0 0 10px rgb(40, 124, 202),
            0 0 20px rgb(40, 124, 202),
            0 0 30px rgb(40, 124, 202),
            0 0 40px rgb(40, 124, 202),
            0 0 50px rgb(40, 124, 202),
            0 0 60px rgb(40, 124, 202),
            0 0 60px rgb(40, 124, 202);
            境界線の半径: 50%;
            zインデックス: 1;
            
        }
      
    </スタイル>
</head>
<本文>
    <div class="コンテナ">
        <span>読み込み中...</span>
        <div class="circle">
            <div class="リング"></div>
        </div>
    </div>
</本文>
</html>

要約:

html+css を使用してサラウンドリフレクションローディングエフェクトを実現する方法については、これで終わりです。より関連性の高い html+css サラウンドリフレクションローディングコンテンツについては、123WORDPRESS.COM で以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後も 123WORDPRESS.COM を応援していただければ幸いです。

<<: HTMLで特殊記号を表示する（特殊文字対応表付き）

>>: 純粋なHTML+CSSでタイピング効果を実現