コンテンツ領域の周囲を回転する CSS 動的グラデーション ボーダーの効果 (サンプル コード)

<本文>
    <!-- 最外層はグラデーション領域のサイズを制限するためだけに機能します-->
    <div class="wrap">
        <!-- グラデーション表示領域 -->
        <div class="bgc"></div>
        <!-- 目次 -->
        <div class="content"></div>
    </div>
</本文>

<スタイル>
        /* デモを中央に配置する伸縮ボックス*/
        体 {
            マージン: 0;
            パディング: 0;
            高さ：100vh;
            ディスプレイ: フレックス;
            アイテムの位置を中央揃えにします。
            コンテンツの中央揃え: 中央;
        }
        /* 一番外側のレイヤーは、中央に溢れた .bgc を隠すために使用します。コンテンツ領域と境界サイズに応じてサイズを自由に調整できます。*/
        。包む {
            幅: 300ピクセル;
            高さ: 300px;
            オーバーフロー: 非表示;
            位置: 相対的;
            境界線の半径: 20px;
            /* 伸縮性のあるボックスはコンテンツ領域を中央に配置します */
            ディスプレイ: フレックス;
            アイテムの位置を中央揃えにします。
            コンテンツの中央揃え: 中央; 
        }
        /* 最終的な動的グラデーション境界の実際のコンテンツは .wrap よりも大きいですが、階層関係によりオーバーフロー部分は非表示になり、中央部分は .content で覆われます。最終的に、.wrap と .content の間のギャップにのみ、回転するグラデーション背景が表示されます */
        .bgc {
            幅: 500ピクセル;
            高さ: 500px;
            背景: 線形グラデーション(#fff,#448de0);
            アニメーション: bgc 1.5 秒 無限線形;
            境界線の半径: 50%;
            位置: 絶対; 
            Zインデックス: -1;
        }
        /* コンテンツ領域は状況に応じてサイズを調整します */
        。コンテンツ {
            幅: 250ピクセル;
            高さ: 250px;
            背景色: #fff;
            境界線の半径: 20px;
        }
 /* グラデーションカラー背景回転アニメーション */
        @keyframes bgc {
            0% {
                変換: rotateZ(0);
            }

            100% {
                変換: rotateZ(360deg);
            }
        }
    </スタイル>