磨砂玻璃效果

磨砂玻璃效果

将窗口做成半透明

.glass_modal {
    transform: translate(-50%, -50%);
}

将窗口变成模糊

.glass_modal {
    /* ...(略) */

    /* filter: blur(3px); */ /*自身变成模糊*/
    backdrop-filter: blur(3px); /*窗口变成模糊*/
}

特殊技巧

当鼠标移入时从黑白变为彩色

准备一张彩色图片设为背景

css

<style>
.glass_wrap2 {
    background: url(./images/stroke.jpg) no-repeat center/cover;
    margin-top: 10px;
    height: 350px;

    position: relative; /* 添加定位以便子元素绝对定位 */
    overflow: hidden; /* 防止内容溢出 */
}
</style>

html结构

<div class="glass_wrap2">
    <div class="glass_model2"></div>
</div>

制作一个窗口把背景盖住

.glass_model2 {
    position: absolute; /* 绝对定位实现左右互换 */
    right: 0; /* 从右侧开始 */
    width: 100%;
    height: 100%;

    transition: 2s;
    backdrop-filter: grayscale(1); /* 窗口变成黑白 */
}

最后时监听glass_wrap2的hover事件, 将glass_model2的窗口宽度变为0

.glass_wrap2:hover .glass_model2 {
    width: 0;
    border-left: 2px solid #333;
}