5分钟用CSS实现毛玻璃效果 CSS Glassmorphism

爱被打了一巴掌 2022-12-29 14:13 122阅读 0赞

**目录**

1 视频

2 知识点

2.1 CSS calc() 函数

2.2 CSS var() 函数

2.3 backdrop-filter

2.4 CSS3 box-sizing 属性

2.5 实现思路

3 参考代码

3.1 HTML

3.2 CSS

--------------------

# **1 视频** #

视频地址：[https://www.bilibili.com/video/BV1Ny4y1U7hp][https_www.bilibili.com_video_BV1Ny4y1U7hp]

5分钟实现CSS毛玻璃效果，王冰冰照片毛玻璃效果

# 2 知识点 #

## 2.1 **CSS calc() 函数** ##

CSS calc() 函数用于动态计算长度值。

**语法**

calc(expression)

<table> 
 <tbody> 
  <tr> 
   <td> <p>值</p> </td> 
   <td> <p>描述</p> </td> 
  </tr> 
  <tr> 
   <td> <p>expression</p> </td> 
   <td> <p>必须，一个数学表达式，结果将采用运算后的返回值。</p> </td> 
  </tr> 
 </tbody> 
</table>

> 需要注意的是，运算符前后都需要保留一个空格，例如：width: calc(100% - 10px)；
> 
> 任何长度值都可以使用calc()函数进行计算；
> 
> calc()函数支持 "+", "-", "\*", "/" 运算；
> 
> calc()函数使用标准的数学运算优先级规则；
> 
> 支持版本：CSS3

## **2.2 CSS var() 函数** ##

> var() 函数用于插入自定义的属性值，如果一个属性值在多处被使用，可以使用该方法。
> 
> 支持版本：CSS3

**语法**

var(custom-property-name, value)

<table> 
 <tbody> 
  <tr> 
   <td> <p>值</p> </td> 
   <td> <p>描述</p> </td> 
  </tr> 
  <tr> 
   <td> <p>custom-property-name</p> </td> 
   <td> <p>必需。自定义属性的名称，必需以 -- 开头。</p> </td> 
  </tr> 
  <tr> 
   <td> <p>value</p> </td> 
   <td> <p>可选。备用值，在属性不存在的时候使用。</p> </td> 
  </tr> 
 </tbody> 
</table>

--------------------

## **2.3 backdrop-filter**  ##

**backdrop filter属性允许我们使用css对元素后面的内容应用过滤效果。**

此属性是定义筛选器属性的筛选器效果模块级别1的扩展。它使用与filter属性相同的语法，但效果将应用于元素的背景。这种影响常见于运行ios7及以上版本的设备接口，以及os x yosemite及以上版本的设备接口。如果没有这个特性，这种效果只能通过编辑背景图像本身并应用剪裁和定位技术来实现。

若要使属性具有任何可见效果，需要从嵌套元素或绝对位置沿Z轴将两个元素堆叠在一起。另外，应用背景过滤器的元素的背景必须是半透明的。backdrop filter的工作原理是使浏览器引擎将目标锁定在样式元素后面的内容，而不是元素本身的背景。过滤效果随后应用于该内容，在最终呈现中，背景与页面上的其他元素合成。

对元素应用背景过滤器也会创建新的堆叠上下文，就像应用不透明度时一样。

**语法：**

backdrop-filter: none | <filter-function-list>

首字母： 无

适用于： 所有元素。在svg中，它应用于没有<defs>元素和所有图形元素的容器元素

可设置动画: 是

**<filter-function-list>**

一个空间分隔的过滤函数列表，应用于它们被声明的顺序。下面是可用的筛选器函数列表，它们与筛选器属性的筛选器功能相同。

*  > blur()
    > 
    > brightness()
    > 
    > contrast()
    > 
    > grayscale()
    > 
    > hue-rotate()
    > 
    > invert()
    > 
    > opacity()
    > 
    > saturate()
    > 
    > sepia()
    > 
    > drop-shadow()
    > 
    > url()

## **2.4 CSS3 box-sizing 属性** ##

Box-sizing 属性允许你以某种方式定义某些元素，以适应指定区域。

例如，假如您需要并排放置两个带边框的框，可通过将 box-sizing 设置为 "border-box"。这可令浏览器呈现出带有指定宽度和高度的框，并把边框和内边距放入框中。

<table> 
 <tbody> 
  <tr> 
   <th>默认值:</th> 
   <td>content-box</td> 
  </tr> 
  <tr> 
   <th>继承:</th> 
   <td>no</td> 
  </tr> 
  <tr> 
   <th>版本:</th> 
   <td>CSS3</td> 
  </tr> 
  <tr> 
   <th>JavaScript 语法:</th> 
   <td><em>object</em>.style.boxSizing="border-box"</td> 
  </tr> 
 </tbody> 
</table>

**语法**

box-sizing: content-box|border-box|inherit:

<table> 
 <tbody> 
  <tr> 
   <th>值</th> 
   <th>说明</th> 
  </tr> 
  <tr> 
   <td>content-box</td> 
   <td>这是 CSS2.1 指定的宽度和高度的行为。指定元素的宽度和高度（最小/最大属性）适用于box的宽度和高度。元素的填充和边框布局和绘制指定宽度和高度除外</td> 
  </tr> 
  <tr> 
   <td>border-box</td> 
   <td>指定宽度和高度（最小/最大属性）确定元素边框。也就是说，对元素指定宽度和高度包括了 padding 和 border 。通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。</td> 
  </tr> 
  <tr> 
   <td>inherit</td> 
   <td>指定 box-sizing 属性的值，应该从父元素继承</td> 
  </tr> 
 </tbody> 
</table>

## 2.5 实现思路 ##

1. 定义三个box，布局方式都为absolute。

2. 第一个box 放背景图片，第二个box实现模糊过滤，第三个box放要显示的图片。

3. 通过监听鼠标移动，改变css 自定义属性值，通过calc()， var()函数获取计算自定义属性值实现移动效果。

# 3 参考代码 #

## 3.1 HTML ##

<!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <title>毛玻璃效果:微信公众号AlbertYang</title>
      </head>
      <link rel="stylesheet" type="text/css" href="style.css" />
      <body>
        <section>
          <div class="imgBx">
            <h1>毛玻璃效果</h1>
          </div>
          <div class="box box1"></div>
          <div class="box box2">
            <h1>毛玻璃效果</h1>
          </div>
        </section>
        <script>
          const position = document.documentElement;
          position.addEventListener('mousemove', e => {
            position.style.setProperty('--x', e.pageX + 'px');
            position.style.setProperty('--y', e.pageY + 'px');
          })
    </script>
      </body>
    </html>

## 3.2 CSS ##

* {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    section {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      overflow: hidden;
    }
    section .imgBx {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      background: url(wbb.jpg);
      background-size: 100%;
      background-position: calc(var(--x)/5) calc(var(--y)/5);
    }
    section .box {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      backdrop-filter: blur(10px);
    }
    section .box.box2 {
      background: url(wbb.jpg);
      background-size: 100%;
      clip-path: circle(260px at center);
      background-position: calc(var(--x)/5) calc(var(--y)/5);
    }
    section .box.box2::before {
      content: "";
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 520px;
      height: 520px;
      box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.25);
      z-index: 10;
      border-radius: 50%;
    }
    section h1 {
      position: absolute;
      margin-top: 30%;
      color: #fff;
      font-size: 88px;
      transform: translate(calc(var(--x)/5), calc(var(--y)/5));
    }

![de5bd36dfdddc3ba19086a5b531999c2.gif][]

今天的学习就到这里了，由于本人能力和知识有限，如果有写的不对的地方，还请各位大佬批评指正。**如果想继续学习提高，欢迎关注我，每天学习进步一点点，就是领先的开始，加油。如果觉得本文对你有帮助的话，欢迎转发，评论，点赞！！！**

[https_www.bilibili.com_video_BV1Ny4y1U7hp]: https://www.bilibili.com/video/BV1Ny4y1U7hp
[de5bd36dfdddc3ba19086a5b531999c2.gif]: /images/20221120/715208adfc184887bc299c611b8febc7.png