Maison >interface Web >tutoriel CSS >Effet Forsted Glass utilisant HTML CSS
Effet Forsted Glass utilisant HTML CSS
- Patricia Arquetteoriginal
- 2024-12-02 18:26:14172parcourir
<!DOCTYPE html>
<html lang="fr">
<tête>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Effet verre dépoli avec chute de diamants</title>
<style>
* {
marge : 0 ;
remplissage : 0 ;
dimensionnement de la boîte : bordure-boîte ;
}
corps {
famille de polices : Arial, sans empattement ;
hauteur : 100vh ;
débordement : caché ;
arrière-plan : dégradé linéaire (135 deg, #4a90e2, #9013fe) ;
affichage : flexible ;
aligner les éléments : centre ;
justifier-contenu : centre ;
}
.conteneur-frosted {
largeur : 300 px ;
hauteur : 200px ;
remplissage : 20 px ;
affichage : flexible ;
aligner les éléments : centre ;
justifier-contenu : centre ;
alignement du texte : centre ;
couleur : blanc ;
position : relative ;
rayon de bordure : 15 px ;
arrière-plan : rgba(255, 255, 255, 0,2) ;
filtre de toile de fond : flou (15 px );
box-shadow : 0 8px 32px rgba(0, 0, 0, 0.2);
bordure : 1px rgba solide (255, 255, 255, 0,3) ;
indice z : 10 ;
}
.conteneur givré h1 {
taille de police : 1,5rem ;
indice z : 11 ;
}
/* Style diamant */
.diamant {
position : absolue ;
largeur : 10px ;
hauteur : 10px ;
arrière-plan : rgba(255, 255, 255, 0,8) ;
transformation : rotation (45 degrés) ;
box-shadow : 0 0 10px rgba (255, 255, 255, 0,8);
animation : chute 5s linéaire infinie ;
}
/* Animation de chute */
@keyframes tombent {
0% {
haut : -10px ;
à gauche : calc(100vw * var(--x));
opacité : 1 ;
}
100 % {
en haut : 100vh ;
à gauche : calc(100vw * var(--x));
opacité : 0 ;
}
}
/* Générer plusieurs diamants */
.diamond:ntième-enfant(1) { --x : 0,1 ; durée de l'animation : 4 s ; }
.diamond:ntième-enfant(2) { --x : 0,2 ; durée de l'animation : 6 s ; }
.diamond:ntième-enfant(3) { --x : 0,3 ; durée de l'animation : 5 s ; }
.diamond:ntième-enfant(4) { --x : 0,4 ; durée de l'animation : 4,5 s ; }
.diamond:ntième-enfant(5) { --x : 0,5 ; durée de l'animation : 6,5 s ; }
.diamond:ntième-enfant(6) { --x : 0,6 ; durée de l'animation : 4,8 s ; }
.diamond:ntième-enfant(7) { --x : 0,7 ; durée de l'animation : 5,2 s ; }
.diamond:ntième-enfant(8) { --x : 0,8 ; durée de l'animation : 6,1 s ; }
.diamond:ntième-enfant(9) { --x : 0,9 ; durée de l'animation : 5,9 s ; }
</style>
≪/tête>
<corps>
<div>
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
css html Filter using var display position overflow margin padding border viewport background transform animation flex
Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Astuces pour les balises sémantiques HTMLArticle suivant：Astuces pour les balises sémantiques HTML