backdrop-filter 背面滤镜
设置背景渐变
html 的结构比较简单，一个body和div就可以组成
思路是，用两个元素，底下的元素放图片，上面的元素当鼠标移入时背景变正常
<body>
<div class="model"></div>
</body>
其次是 css 结构
首先是给 body 设置背景图，为上述的底层图，之后防止div将蒙版设置灰度，让整个图片看起来是灰色的
之后当鼠标移入时，让上层盒子宽度变为 0，之后加上过渡即可
* {
margin: 0;
padding: 0;
}
body {
background: url(images/bg.jpeg) no-repeat;
background-size: 100% 100%;
}
.model {
width: 100vw;
height: 100vh;
transition: all 2s;
backdrop-filter: grayscale(1);
}
body:hover .model {
width: 0;
height: 100vh;
}
当鼠标移入时，效果如下所示
磨砂玻璃效果
html 结构
<body>
<div class="mask"></div>
<div class="out">
<h1>BACKDROP-FILTER</h1>
</div>
</body>
css 结构
* {
margin: 0;
padding: 0;
}
设置了所有元素的外边距和内边距为零，以确保页面的内容不会被默认的外边距和内边距影响。
body {
background: linear-gradient(to right, #feff00, #fa7c23, #b7236f, #90108f);
}
创建了一个从左到右的背景渐变，颜色由黄色、橙色、紫色和深紫色组成。
.mask {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 500px;
height: 300px;
border-radius: 20px;
border: 1px solid #ccc;
background: #ffffff5f;
backdrop-filter: blur(3px);
transition: all 2s;
z-index: 1;
}
定义了一个遮罩层，它具有以下属性：
position: absolute：将元素的位置设置为相对于其最近的非静态祖先元素的绝对位置。top: 50%和left: 50%：将元素的顶部和左侧边缘分别设置为其包含块的 50%。transform: translate(-50%, -50%)：将元素向左上方移动其自身宽度和高度的一半，以便将其居中在页面上。width: 500px和height: 300px：设置元素的宽度和高度。border-radius: 20px：设置元素的圆角边框半径为 20 像素。border: 1px solid #ccc：设置元素的边框为 1 像素的实线边框，颜色为灰色。background: #ffffff5f：设置元素的背景颜色为白色半透明。backdrop-filter: blur(3px)：将元素的背景模糊化，模糊程度为 3 像素。transition: all 2s：将元素的所有属性的过渡效果设置为 2 秒。z-index: 1：将元素的堆叠顺序设置为 1，以确保它在其他元素之上。
.out {
position: relative;
width: 100%;
height: 100vh;
}
定义了一个名为 .out 的容器元素，它具有以下属性：
position: relative：将元素的位置设置为相对于其正常位置的位置。width: 100%和height: 100vh：设置元素的宽度和高度分别为视口的宽度和高度。
h1 {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
font-size: 66px;
-webkit-text-stroke: 2px #fff;
}
定义了一个居中对齐的标题元素，具有以下属性：
position: absolute：将元素的位置设置为相对于其最近的非静态祖先元素的绝对位置。top: 50%和left: 50%：将元素的顶部和左侧边缘分别设置为其包含块的 50%。transform: translate(-50%, -50%)：将元素向左上方移动其自身宽度和高度的一半，以便将其居中在页面上。text-align: center：将元素的文本居中对齐。font-size: 66px：设置元素的字体大小为 66 像素。-webkit-text-stroke: 2px #fff：将元素的文本描边为 2 像素的白色线条。
body:hover .mask {
width: 0;
border: none;
}
定义了一个鼠标悬停时的动态效果，它将遮罩层的宽度设置为零并将其边框删除，以使其消失。
全部的样式
* {
margin: 0;
padding: 0;
}
body {
background: linear-gradient(to right, #feff00, #fa7c23, #b7236f, #90108f);
}
.mask {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 500px;
height: 300px;
border-radius: 20px;
border: 1px solid #ccc;
background: #ffffff5f;
backdrop-filter: blur(3px);
transition: all 2s;
z-index: 1;
}
.out {
position: relative;
width: 100%;
height: 100vh;
}
h1 {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
font-size: 66px;
-webkit-text-stroke: 2px #fff;
}
body:hover .mask {
width: 0;
border: none;
}
当鼠标移入时
