✨ グラスモーフィックなツイストを加えた光るディスコ電球アニメーション! ✨ HTML CSS と JavaSCRIPT をコード化する-jsチュートリアル-php.cn

✨ グラスモーフィックなツイストを加えた光るディスコ電球アニメーション! ✨ HTML CSS と JavaSCRIPT をコード化する

Patricia Arquette

リリース： 2024-12-24 17:25:13

オリジナル

403 人が閲覧しました

✨ Glowing Disco Bulbs Animation with a Glassmorphic Twist! ✨ Code 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;
      高さ: 100vh;
      ディスプレイ: フレックス;
      コンテンツの位置揃え: 中央;
      整列項目: 中央;
      背景: 線形グラデーション(45度、#000000、#111111);
      フォントファミリー: Arial、サンセリフ;
    }

    。容器 {
      ディスプレイ: フレックス;
      ギャップ: 200ピクセル;
    }

    。壁 {
      ディスプレイ: フレックス;
      フレックス方向: 列;
      コンテンツの位置揃え: 間のスペース;
      高さ: 300ピクセル;
      パディング: 15px;
      境界半径: 10px;
      背景: rgba(96, 95, 95, 0.281);
      背景フィルター: ぼかし(10px);
      ボックスシャドウ: 0 4px 10px rgba(0, 0, 0, 0.5);
    }

    .bulb {
      幅: 60ピクセル;
      高さ: 60ピクセル;
      背景: rgba(255, 255, 255, 0.1);
      ボーダー: 2px ソリッド rgba(255, 255, 255, 0.2);
      境界半径: 50%;
      背景フィルター: ぼかし(10px);
      ボックスシャドウ: 0 0 5px rgba(255, 255, 255, 0.2)、インセット 0 0 10px rgba(255, 255, 255, 0.1);
      トランジション: ボックスシャドウ 0.3 秒、背景色 0.3 秒。
    }

    .bulb.glow {
      アニメーション: ディスコ 0.2 秒無限代替。
    }

    @キーフレームディスコ {
      0% {
        背景色: rgba(255, 0, 128, 0.8);
        ボックスシャドウ: 0 0 40px 40px rgba(255, 0, 128, 0.8);
      }
      25% {
        背景色: rgba(0, 255, 128, 0.8);
        ボックスシャドウ: 0 0 30px 10px rgba(0, 255, 128, 0.8);
      }
      50% {
        背景色: rgba(0, 128, 255, 0.8);
        ボックスシャドウ: 0 0 30px 10px rgba(0, 128, 255, 0.8);
      }
      75% {
        背景色: rgba(255, 255, 0, 0.8);
        ボックスシャドウ: 0 0 30px 10px rgba(255, 255, 0, 0.8);
      }
      100% {
        背景色: rgba(255, 128, 0, 0.8);
        ボックスシャドウ: 0 0 30px 10px rgba(255, 128, 0, 0.8);
      }
    }

    .スタートボタン {
      位置: 絶対;
      下: 50ピクセル;
      パディング: 15px 30px;
      背景: #ff5722;
      色: 白;
      境界線: なし。
      境界半径: 10px;
      カーソル: ポインタ;
      フォントサイズ: 18px;
      フォントの太さ: 太字;
      ボックスシャドウ: 0 4px 8px rgba(0, 0, 0, 0.5);
      トランジション: バックグラウンド 0.3 秒。
    }

    .スタートボタン:ホバー {
      背景: #ff784e;
    }
  </スタイル>
</head>

  <div>




          </div>

ログイン後にコピー

以上が✨ グラスモーフィックなツイストを加えた光るディスコ電球アニメーション! ✨ HTML CSS と JavaSCRIPT をコード化するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。