Heim >Web-Frontend >CSS-Tutorial >Forsted Glass-Effekt mit HTML-CSS
Forsted Glass-Effekt mit HTML-CSS
- Patricia ArquetteOriginal
- 2024-12-02 18:26:14241Durchsuche
<!DOCTYPE html>
<html lang="de">
<Kopf>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Milchglaseffekt mit fallenden Diamanten</title>
<Stil>
* {
Rand: 0;
Polsterung: 0;
Boxgröße: border-box;
}
Körper {
Schriftfamilie: Arial, serifenlos;
Höhe: 100 Vh;
Überlauf: versteckt;
Hintergrund: linear-gradient(135deg, #4a90e2, #9013fe);
Anzeige: Flex;
align-items: center;
rechtfertigen-Inhalt: Mitte;
}
.frosted-container {
Breite: 300px;
Höhe: 200px;
Polsterung: 20px;
Anzeige: Flex;
align-items: center;
rechtfertigen-Inhalt: Mitte;
Textausrichtung: Mitte;
Farbe: weiß;
Position: relativ;
Randradius: 15px;
Hintergrund: rgba(255, 255, 255, 0,2);
Hintergrundfilter: Unschärfe (15 Pixel);
Box-Shadow: 0 8px 32px rgba(0, 0, 0, 0,2);
Rand: 1px solid rgba(255, 255, 255, 0,3);
Z-Index: 10;
}
.frosted-container h1 {
Schriftgröße: 1,5rem;
Z-Index: 11;
}
/* Diamant-Styling */
.diamant {
Position: absolut;
Breite: 10px;
Höhe: 10px;
Hintergrund: rgba(255, 255, 255, 0,8);
transformieren: drehen (45 Grad);
Box-Shadow: 0 0 10px rgba(255, 255, 255, 0,8);
Animation: Fall 5s linear unendlich;
}
/* Fallende Animation */
@keyframes fallen {
0 % {
oben: -10px;
links: calc(100vw * var(--x));
Deckkraft: 1;
}
100 % {
oben: 100 Vh;
links: calc(100vw * var(--x));
Deckkraft: 0;
}
}
/* Mehrere Diamanten generieren */
.diamond:nth-child(1) { --x: 0.1; Animationsdauer: 4s; }
.diamond:nth-child(2) { --x: 0.2; Animationsdauer: 6s; }
.diamond:nth-child(3) { --x: 0.3; Animationsdauer: 5s; }
.diamond:nth-child(4) { --x: 0.4; Animationsdauer: 4,5s; }
.diamond:nth-child(5) { --x: 0.5; Animationsdauer: 6,5s; }
.diamond:nth-child(6) { --x: 0.6; Animationsdauer: 4,8s; }
.diamond:nth-child(7) { --x: 0.7; Animationsdauer: 5,2 s; }
.diamond:nth-child(8) { --x: 0.8; Animationsdauer: 6,1 s; }
.diamond:nth-child(9) { --x: 0.9; Animationsdauer: 5,9 s; }
</style>
</head>
<Körper>
<div>
Das obige ist der detaillierte Inhalt vonForsted Glass-Effekt mit HTML-CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
css html Filter using var display position overflow margin padding border viewport background transform animation flex
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Tricks für semantische HTML-TagsNächster Artikel：Tricks für semantische HTML-Tags