モーフィズムリングコード-jsチュートリアル-php.cn

モーフィズムリングコード

Mary-Kate Olsen

リリース： 2025-01-03 00:10:39

オリジナル

984 人が閲覧しました

Morphism Ring code

<!DOCTYPE html>
<html lang="ja">

    <メタ文字セット="UTF-8">
    <meta name="viewport" content="width=device-width、initial-scale=1.0">
    <title>モーフィング グラデーション リング</title>
    
        体 {
            マージン: 0;
            高さ: 100vh;
            ディスプレイ: フレックス;
            コンテンツの位置揃え: 中央;
            整列項目: 中央;
            背景: 線形グラデーション(120度、#0d1015、#091529);
            オーバーフロー: 非表示;
        }

        .ring-container {
            位置: 相対的;
            幅: 300ピクセル;
            高さ: 300ピクセル;
        }

        。指輪 {
            位置: 絶対;
            トップ: 50%;
            左: 50%。
            幅: 100%;
            高さ: 100%;
            境界半径: 50%;
            背景:円錐グラデーション(
            0度から、#ff7eb3、#ff758c、#ff6a56、 
            #f9a826,#f02fc2#9b00ff,#ff7eb3
            );
            変換: 変換(-50%、-50%) 
            回転(0度);
            アニメーション: 回転リング 5 秒の線形無限。
        }

        .ring::before {
            コンテンツ： '';
            位置: 絶対;
            トップ: 50%;
            左: 50%。
            幅: 80%;
            高さ: 80%;
            背景: 線形グラデーション(右下へ、rgba(0, 0, 0, 0.5), rgba(255, 255, 255, 0.1));
            境界半径: 50%;
            フィルター: ぼかし(10px);
            変換: 変換(-50%, -50%);
        }

        .ring::after {
            コンテンツ： '';
            位置: 絶対;
            トップ: 50%;
            左: 50%。
            幅: 60%;
            高さ: 60%;
            背景: rgba(255, 255, 255, 0.1);
            ボーダー: 2px ソリッド rgba(255, 255, 255, 0.2);
            境界半径: 50%;
            変換: 変換(-50%, -50%);
        }

        @keyframes 回転リング {
            0% {
                変換: 変換(-50%、-50%) 
                回転(0度);
            }
            100% {
                変換: 変換(-50%、-50%)
                回転(360度);
            }
        }
    </スタイル>
</head>

    <div>




          </div>

ログイン後にコピー

以上がモーフィズムリングコードの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。