css实现毛玻璃（图片模糊）效果

最新推荐文章于 2024-05-07 19:57:33 发布

qq_45826380

最新推荐文章于 2024-05-07 19:57:33 发布

阅读量494

点赞数

本文链接：https://blog.csdn.net/qq_45826380/article/details/113802935

版权

毛玻璃也就是磨砂玻璃，能够图片模糊，让界面更有层次感。

一、实现方法

定义三个box，布局方式都为absolute。
第一个box 放背景图片，第二个box实现模糊过滤，第三个box放要显示的图片。
通过监听鼠标移动，改变css 自定义属性值，通过calc()， var()函数获取计算自定义属性值实现移动效果。

二、代码

1.HTML

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>毛玻璃效果</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">
        <h3>毛玻璃效果</h3>
    </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>

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("src/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(src/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));
}

三、效果图

在这里插入图片描述

qq_45826380

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
css实现毛玻璃（图片模糊）效果

目录一、实现方法二、代码1.HTML2.css三、效果图一、实现方法定义三个box，布局方式都为absolute。第一个box 放背景图片，第二个box实现模糊过滤，第三个box放要显示的图片。通过监听鼠标移动，改变css 自定义属性值，通过calc()， var()函数获取计算自定义属性值实现移动效果。二、代码1.HTML<!DOCTYPE html><html><head> <meta charset="utf-8"&g
复制链接

扫一扫