Heim >Web-Frontend >CSS-Tutorial >Forsted Glass-Effekt mit HTML-CSS

Forsted Glass-Effekt mit HTML-CSS

Patricia Arquette
Patricia ArquetteOriginal
2024-12-02 18:26:14209Durchsuche

Forsted Glass Effect using html css

<!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!

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