CSS 毛玻璃特效开发

  • 时间:
  • 分类: CSS

之前在我的博客中有写磨砂玻璃的效果开发,但是会存在很多的局限.
附上链接: 磨砂波理效果开发
最近发现css又多了个backdrop-filter的属性,能够非常简单的实现毛玻璃的效果.
真的是太感动了

附上效果图:
http://qn.fengyitong.name/backdrop-filter.png

附上官方文档说明:
https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#result

附上浏览器当前支持程度:
http://qn.fengyitong.name/can-i-use-backdrop-filter.png

顺便附上效果图参考代码(官方文档的示例代码)

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box {
      background-color: rgba(255, 255, 255, 0.3);
      border-radius: 5px;
      font-family: sans-serif;
      text-align: center;
      line-height: 1;
      -webkit-backdrop-filter: blur(10px);
      backdrop-filter: blur(10px);
      max-width: 50%;
      max-height: 50%;
      padding: 20px 40px;
    }

    html,
    body {
      height: 100%;
      width: 100%;
    }

    body {
      background-image: url(https://picsum.photos/id/1080/6858/4574), linear-gradient(rgb(219, 166, 166), rgb(0, 0, 172));
      background-position: center center;
      background-repeat: no-repeat;
      background-size: cover;
    }

    .container {
      align-items: center;
      display: flex;
      justify-content: center;
      height: 100%;
      width: 100%;
    }
  </style>
</head>

<body>
  <div class="container">
    <div class="box">
      <p>backdrop-filter: blur(10px)</p>
    </div>
  </div>
</body>

</html>

标签: none

仅有一条评论

  1. 仙女 仙女

    真厉害

    回复

添加新评论