使用 html css 的福斯特玻璃效果

  
  
  <title>帶有墜落鑽石的磨砂玻璃效果</title>
  
    * {
      保證金：0；
      填充：0；
      框大小：邊框框；
    }

    身體 {
      字體系列：Arial、無襯線字體；
      高度：100vh；
      溢出：隱藏；
      背景：線性漸變（135deg，#4a90e2，#9013fe）；
      顯示：柔性；
      對齊項目：居中；
      調整內容：居中；
    }

    .磨砂容器{
      寬度：300px；
      高度：200px；
      內邊距：20px；
      顯示：柔性；
      對齊項目：居中；
      調整內容：居中；
      文字對齊：居中；
      顏色: 白色;
      位置：相對；
      邊框半徑：15px；
      背景：rgba(255, 255, 255, 0.2);
      背景過濾器：模糊（15px）；
      盒子陰影：0 8px 32px rgba(0, 0, 0, 0.2);
      邊框: 1px 實心 rgba(255, 255, 255, 0.3);
      z 索引：10；
    }

    .磨砂容器 h1 {
      字體大小：1.5rem；
      z 索引：11；
    }

    /* 鑽石樣式 */
    。鑽石 {
      位置：絕對；
      寬度：10px；
      高度：10px；
      背景：rgba(255, 255, 255, 0.8);
      變換：旋轉（45度）；
      盒子陰影: 0 0 10px rgba(255, 255, 255, 0.8);
      動畫：下降5秒線性無限；
    }

    /* 下落動畫 */
    @關鍵影格下降{
      0% {
        頂部：-10px；
        左： calc(100vw * var(--x));
        不透明度：1；
      }
      100% {
        頂部：100vh；
        左： calc(100vw * var(--x));
        不透明度：0；
      }
    }

    /* 產生多個鑽石 */
    .diamond:nth-child(1) { --x: 0.1;動畫持續時間：4s； }
    .diamond:nth-child(2) { --x: 0.2;動畫持續時間：6s； }
    .diamond:nth-child(3) { --x: 0.3;動畫持續時間：5s； }
    .diamond:nth-child(4) { --x: 0.4;動畫持續時間：4.5s； }
    .diamond:nth-child(5) { --x: 0.5;動畫持續時間：6.5s； }
    .diamond:nth-child(6) { --x: 0.6;動畫持續時間：4.8s； }
    .diamond:nth-child(7) { --x: 0.7;動畫持續時間：5.2s； }
    .diamond:nth-child(8) { --x: 0.8;動畫持續時間：6.1s； }
    .diamond:nth-child(9) { --x: 0.9;動畫持續時間：5.9s； }

  風格>
頭>


  <div>




          </div>

            
        

以上是使用 html css 的福斯特玻璃效果的詳細內容。更多資訊請關注PHP中文網其他相關文章！