ホームページ >ウェブフロントエンド >CSSチュートリアル >HTML CSSを使用した強化ガラス効果
HTML CSSを使用した強化ガラス効果
- Patricia Arquetteオリジナル
- 2024-12-02 18:26:14172ブラウズ
<!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 サイトの他の関連記事を参照してください。
css html Filter using var display position overflow margin padding border viewport background transform animation flex
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：HTML セマンティック タグのトリック次の記事：HTML セマンティック タグのトリック