Rumah >hujung hadapan web >tutorial css >Kesan Kaca Forsted menggunakan html css
Kesan Kaca Forsted menggunakan html css
- Patricia Arquetteasal
- 2024-12-02 18:26:14172semak imbas
<!DOCTYPE html>
<html lang="en">
<kepala>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Kesan Kaca Es dengan Berlian Jatuh</title>
<gaya>
* {
margin: 0;
padding: 0;
saiz kotak: kotak sempadan;
}
badan {
font-family: Arial, sans-serif;
ketinggian: 100vh;
limpahan: tersembunyi;
latar belakang: kecerunan linear(135deg, #4a90e2, #9013fe);
paparan: flex;
align-item: tengah;
justify-content: pusat;
}
.bekas beku {
lebar: 300px;
ketinggian: 200px;
padding: 20px;
paparan: flex;
align-item: tengah;
justify-content: pusat;
text-align: tengah;
warna: putih;
kedudukan: relatif;
jejari sempadan: 15px;
latar belakang: rgba(255, 255, 255, 0.2);
backdrop-filter: blur(15px);
bayang-kotak: 0 8px 32px rgba(0, 0, 0, 0.2);
sempadan: 1px rgba pepejal(255, 255, 255, 0.3);
indeks z: 10;
}
.bekas beku h1 {
saiz fon: 1.5rem;
indeks z: 11;
}
/* Penggayaan berlian */
.berlian {
jawatan: mutlak;
lebar: 10px;
ketinggian: 10px;
latar belakang: rgba(255, 255, 255, 0.8);
mengubah: berputar (45deg);
bayang kotak: 0 0 10px rgba(255, 255, 255, 0.8);
animasi: jatuh 5s linear tak terhingga;
}
/* Animasi jatuh */
@keyframes jatuh {
0% {
atas: -10px;
kiri: calc(100vw * var(--x));
kelegapan: 1;
}
100% {
atas: 100vh;
kiri: calc(100vw * var(--x));
kelegapan: 0;
}
}
/* Hasilkan berbilang berlian */
.diamond:nth-child(1) { --x: 0.1; tempoh animasi: 4s; }
.diamond:nth-child(2) { --x: 0.2; tempoh animasi: 6s; }
.diamond:nth-child(3) { --x: 0.3; tempoh animasi: 5s; }
.diamond:nth-child(4) { --x: 0.4; tempoh animasi: 4.5s; }
.diamond:nth-child(5) { --x: 0.5; tempoh animasi: 6.5s; }
.diamond:nth-child(6) { --x: 0.6; tempoh animasi: 4.8s; }
.diamond:nth-child(7) { --x: 0.7; tempoh animasi: 5.2s; }
.diamond:nth-child(8) { --x: 0.8; tempoh animasi: 6.1s; }
.diamond:nth-child(9) { --x: 0.9; tempoh animasi: 5.9s; }
</style>
</head>
<badan>
<div>
Atas ialah kandungan terperinci Kesan Kaca Forsted menggunakan html css. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
css html Filter using var display position overflow margin padding border viewport background transform animation flex
Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：Trik untuk Tag Semantik HTMLArtikel seterusnya：Trik untuk Tag Semantik HTML