HTML CSSを使用した強化ガラス効果-CSSチュートリアル-php.cn

HTML CSSを使用した強化ガラス効果

Patricia Arquette

リリース： 2024-12-02 18:26:14

オリジナル

217 人が閲覧しました

Forsted Glass Effect using html css

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

  <メタ文字セット="UTF-8">
  <meta name="viewport" content="width=device-width、initial-scale=1.0">
  <title>ダイヤモンドが落ちるすりガラス効果</title>
  
    * {
      マージン: 0;
      パディング: 0;
      ボックスのサイズ設定: ボーダーボックス;
    }

    体 {
      フォントファミリー: Arial、サンセリフ;
      高さ: 100vh;
      オーバーフロー: 非表示;
      背景: 線形グラデーション(135度、#4a90e2、#9013fe);
      ディスプレイ: フレックス;
      整列項目: 中央;
      コンテンツの位置揃え: 中央;
    }

    .frosted-container {
      幅: 300ピクセル;
      高さ: 200ピクセル;
      パディング: 20px;
      ディスプレイ: フレックス;
      整列項目: 中央;
      コンテンツの位置揃え: 中央;
      テキスト整列: 中央;
      色: 白;
      位置: 相対的;
      境界半径: 15px;
      背景: rgba(255, 255, 255, 0.2);
      背景フィルター: ぼかし(15px);
      ボックスシャドウ: 0 8px 32px rgba(0, 0, 0, 0.2);
      ボーダー: 1px ソリッド rgba(255, 255, 255, 0.3);
      z インデックス: 10;
    }

    .frosted-container h1 {
      フォントサイズ: 1.5rem;
      z インデックス: 11;
    }

    /* ダイヤモンドのスタイリング */
    .ダイヤモンド {
      位置: 絶対;
      幅: 10px;
      高さ: 10px;
      背景: rgba(255, 255, 255, 0.8);
      変換: 回転(45 度);
      ボックスシャドウ: 0 0 10px rgba(255, 255, 255, 0.8);
      アニメーション: フォール 5 秒リニア無限。
    }

    /* 落下アニメーション */
    @keyframes が落ちる {
      0% {
        上: -10px;
        左: calc(100vw * var(--x));
        不透明度: 1;
      }
      100% {
        上: 100vh;
        左: calc(100vw * var(--x));
        不透明度: 0;
      }
    }

    /* 複数のダイヤモンドを生成します */
    .diamond:nth-child(1) { --x: 0.1;アニメーション期間: 4 秒。 }
    .diamond:nth-child(2) { --x: 0.2;アニメーション期間: 6 秒。 }
    .diamond:nth-child(3) { --x: 0.3;アニメーション期間: 5 秒。 }
    .diamond:nth-child(4) { --x: 0.4;アニメーション期間: 4.5 秒。 }
    .diamond:nth-child(5) { --x: 0.5;アニメーション期間: 6.5 秒。 }
    .diamond:nth-child(6) { --x: 0.6;アニメーション期間: 4.8 秒。 }
    .diamond:nth-child(7) { --x: 0.7;アニメーション期間: 5.2 秒。 }
    .diamond:nth-child(8) { --x: 0.8;アニメーション期間: 6.1 秒。 }
    .diamond:nth-child(9) { --x: 0.9;アニメーション期間: 5.9 秒。 }

  </スタイル>
</head>


  <div>




          </div>

ログイン後にコピー

以上がHTML CSSを使用した強化ガラス効果の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。