使用 html css 的福斯特玻璃效果-css教程-PHP中文网

首页

web前端

css教程

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

Patricia Arquette

Dec 02, 2024 pm 06:26 PM

Forsted Glass Effect using html css

<html lang="zh-cn">
<头>
  
  
  <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中文网其他相关文章！

本站声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn