css磨玻璃效果 |css3 翅膀

.blur {
/* 设置元素为相对定位 */
position: relative;
/* 创建一个伪元素 */
&:after {
/* 设置伪元素的内容为空 */
content: "";
/* 设置伪元素为绝对定位 */
position: absolute;
/* 设置伪元素的大小，等于父元素的大小 */
width: 100%;
height: 100%;
/* 设置背景颜色 */
background-color: rgba(255, 255, 255, 0.2);
/* 设置模糊半径 */
filter: blur(10px);
/* 设置z-index，使伪元素在父元素之上 */
z-index: -1;
}
}

上面的代码中，大家使用了一个伪元素来实现磨玻璃效果，该伪元素被设置为了父元素的背景色，并添加了模糊半径，从而实现了一种模糊的效果。此外，大家还需要将伪元素的z-index设置为-1，以确保其在父元素之下。

除了使用伪元素外，大家还可以使用其他一些方法来实现磨玻璃效果，例如使用CSS3的backdrop-filter属性或使用SVG滤镜等方式。但无论使用何种方法，都需要注意磨玻璃效果的使用频率，过多的使用可能会影响页面的性能。