Forsted Glass-Effekt mit HTML-CSS-CSS-Tutorial-php.cn

Forsted Glass-Effekt mit HTML-CSS

Patricia Arquette

Freigeben： 2024-12-02 18:26:14

Original

217 Leute haben es durchsucht

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>

Nach dem Login kopieren

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!