Home >Web Front-end >CSS Tutorial >Forsted Glass Effect using html css

Forsted Glass Effect using html css

Patricia ArquetteOriginal: 2024-12-02 18:26:14167browse

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Frosted Glass Effect with Falling Diamonds</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      font-family: Arial, sans-serif;
      height: 100vh;
      overflow: hidden;
      background: linear-gradient(135deg, #4a90e2, #9013fe);
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .frosted-container {
      width: 300px;
      height: 200px;
      padding: 20px;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      color: white;
      position: relative;
      border-radius: 15px;
      background: rgba(255, 255, 255, 0.2);
      backdrop-filter: blur(15px);
      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
      border: 1px solid rgba(255, 255, 255, 0.3);
      z-index: 10;
    }

    .frosted-container h1 {
      font-size: 1.5rem;
      z-index: 11;
    }

    /* Diamond styling */
    .diamond {
      position: absolute;
      width: 10px;
      height: 10px;
      background: rgba(255, 255, 255, 0.8);
      transform: rotate(45deg);
      box-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
      animation: fall 5s linear infinite;
    }

    /* Falling animation */
    @keyframes fall {
      0% {
        top: -10px;
        left: calc(100vw * var(--x));
        opacity: 1;
      }
      100% {
        top: 100vh;
        left: calc(100vw * var(--x));
        opacity: 0;
      }
    }

    /* Generate multiple diamonds */
    .diamond:nth-child(1) { --x: 0.1; animation-duration: 4s; }
    .diamond:nth-child(2) { --x: 0.2; animation-duration: 6s; }
    .diamond:nth-child(3) { --x: 0.3; animation-duration: 5s; }
    .diamond:nth-child(4) { --x: 0.4; animation-duration: 4.5s; }
    .diamond:nth-child(5) { --x: 0.5; animation-duration: 6.5s; }
    .diamond:nth-child(6) { --x: 0.6; animation-duration: 4.8s; }
    .diamond:nth-child(7) { --x: 0.7; animation-duration: 5.2s; }
    .diamond:nth-child(8) { --x: 0.8; animation-duration: 6.1s; }
    .diamond:nth-child(9) { --x: 0.9; animation-duration: 5.9s; }

  </style>
</head>
<body>

  <div>

The above is the detailed content of Forsted Glass Effect using html css. For more information, please follow other related articles on the PHP Chinese website!

css html Filter using var display position overflow margin padding border viewport background transform animation flex

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Tricks for HTML Semantic TagsNext article：Tricks for HTML Semantic Tags

See more

Forsted Glass Effect using html css

Related articles