灏天阁

CSS实现毛玻璃效果

· Yin灏

前言

近日无意间透过装了热水之后，散发出水蒸气的透明水杯看东西时，发现看到的东西呈现模糊效果，这种效果和毛玻璃效果类似。毛玻璃效果在 web、手机系统上也有很多应用，如网页上的广告弹窗，手机系统的消息通知界面等等。如下效果：

image.png

具体实现

今天用 css 简单实现下毛玻璃效果，主要使用了backdrop-filter属性。

  1. body 设置 flex 布局，让其中具有毛玻璃效果的元素水平居中显示，该元素里面还包裹了诗句元素，增加效果对比。并且给 body 添加一张背景图片，铺满整个屏幕，超出设置隐藏
<div class="frosted-glass">
  <h2 class="title">首夏犹清和，芳草亦未歇。</h2>
</div>

body {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100vh;
  background-image: url(https://img.zcool.cn/community/031roebkxvm4bjwma3rbdfd3835.png?x-oss-process=image/resize,m_fill,w_520,h_390,limit_1/auto-orient,1/sharpen,100/format,webp/quality,q_100);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  overflow: hidden;
}
  1. 给具有毛玻璃效果的元素添加backdrop-filter属性，设置属性值 滤镜函数值blur()为 10px，该数值越大越模糊，单位不接受百分比值。并在鼠标移入该元素时，加了一个 hover 效果，让该元素更为醒目。

backdrop-filter  属性作用于元素后面的区域，添加图形效果（如模糊或颜色偏移）。为了实现效果，必须使元素或其背景至少部分透明。简单来说就是添加该属性的元素背景模糊

.frosted-glass {
  width: 55vw;
  height: 32vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  backdrop-filter: blur(10px);
  transition: 0.5s ease;
}
.frosted-glass:hover {
  box-shadow: 0 0.7px 1px rgba(0, 0, 0, 0.1), 0 1.7px 2.6px rgba(0, 0, 0, 0.2),
    0 3.5px 5.3px rgba(0, 0, 0, 0.3), 0 7.3px 11px rgba(0, 0, 0, 0.4),
    0 20px 30px rgba(0, 0, 0, 0.5);
}

引申知识点：

filter  属性应用于元素，添加模糊或颜色偏移等图形效果。通常用于图片做高斯模糊滤镜效果。

backdrop-filter  与  filter  非常类似，可以取的值都是一样的，都可以写出高斯模糊的效果，只是作用的目标不一样。

代码块

具体的效果展示如下：

- Book Lists -