html cssとjavascriptを使用した催眠スパイラル錯視-jsチュートリアル-php.cn

html cssとjavascriptを使用した催眠スパイラル錯視

Mary-Kate Olsen

リリース： 2024-12-04 15:42:12

オリジナル

842 人が閲覧しました

Hypnotic Spiral illusion using html css and javascript

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

    <メタ文字セット="UTF-8">
    <meta name="viewport" content="width=device-width、initial-scale=1.0">
    <title>催眠スパイラルアニメーション</title>
    
        * {
            マージン: 0;
            パディング: 0;
            ボックスのサイズ設定: ボーダーボックス;
            背景: #000;
            オーバーフロー: 非表示;
            色: #fff;
        }
        体 {
            ディスプレイ: フレックス;
            コンテンツの位置揃え: 中央;
            整列項目: 中央;
            高さ: 100vh;
        }
        .スパイラル {
            位置: 相対的;
            幅: 200ピクセル;
            高さ: 200ピクセル;
            アニメーション: 4 秒のリニア無限回転。
        }
        .spiral::before {
            コンテンツ： '';
            位置: 絶対;
            トップ: 0;
            左: 0;
            幅: 100%;
            高さ: 100%;
            境界半径: 50%;
            境界線: 2 ピクセルの透明な実線。
            境界画像: 円錐勾配(0 度から、#f00、#ff0、#0f0、#0ff、#00f、#f0f、#f00);
            境界画像スライス: 1;
            アニメーション: animateSpiral 10s リニア無限。
        }
        .wave {
            位置: 絶対;
            トップ: 50%;
            左: 50%。
            変換: 変換(-50%, -50%);
            境界半径: 50%;
            ボーダー: 2px ソリッド rgba(255, 255, 255, 0.3);
            アニメーション: ExpandWave 1s イーズアウト無限。
        }

        @keyframes スピン {
            0% { 変換: 回転(0度); }
            100% { 変換: 回転(360 度); }
        }
        @keyframes animateSpiral {
            0%、100% { 変換: スケール(1); }
            50% { 変換: スケール(0.5); }
        }
        @keyframesexpandWave {
            0% {
                幅: 0;
                高さ: 0;
                不透明度: 1;
            }
            100% {
                幅: 500ピクセル;
                高さ: 500ピクセル;
                不透明度: 0;
            }
        }
    </スタイル>
</head>

    <div>




          </div>

ログイン後にコピー

以上がhtml cssとjavascriptを使用した催眠スパイラル錯視の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。