Effet Forsted Glass utilisant HTML CSS-tutoriel CSS-php.cn

Effet Forsted Glass utilisant HTML CSS

Patricia Arquette

Libérer： 2024-12-02 18:26:14

original

216 Les gens l'ont consulté

Forsted Glass Effect using html css

<!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>
&Lt;/tête>
<corps>

  <div>

Copier après la connexion

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!