径向聚焦，你就是全场最靓的仔

最新推荐文章于 2024-09-14 08:09:14 发布

AI画手小王

最新推荐文章于 2024-09-14 08:09:14 发布

阅读量144

点赞数

文章标签： css html 前端

本文链接：https://blog.csdn.net/qq_53225741/article/details/128930839

版权

本文介绍如何利用CSS的backdrop-filter属性创建径向聚焦效果，并跟随鼠标移动。首先通过设置整体模糊，然后利用radial-gradient创建聚焦区域，结合鼠标移动事件更新聚焦区域的位置，最终实现动态的视觉焦点效果。

摘要由CSDN通过智能技术生成

通过mask-image属性我们得到了一个径向聚焦的效果，通过css变量让这个聚焦效果可以随着鼠标的移动而移动，接下来就一起来看看这个效果是如何实现的吧。

先来体验效果：

思路

这里有很多细节处理，我们先来看看整体的流程：

1.整体模糊，需要用到backdrop-filter属性
2.模糊中要有一个聚焦的区域，通过mask-image属性实现
3.聚焦的区域需要跟随鼠标移动，通过css变量实现

思路有了，接下来就是实现了。

整体模糊

整体模糊先从布局入手，要有一个大的蒙版层，给所有元素都盖住，然后蒙版层要有模糊效果：

<!DOCTYPE html>
<html lang="en">
<head><title>Document</title><style> .mask {position: fixed;top: 0;left: 0;width: 100%;height: 100%;background-color: rgba(0, 0, 0, 0.5);backdrop-filter: blur(10px);} </style>
</head>
<body>
这里随便来点内容<div class="mask"></div>
</body>
</html>

现在我们就得到了一个整体模糊的效果，接下来就是要实现聚焦的区域。

页面的样式和内容可以根据自己的喜好来定制，这里只是为了演示代码，所以没有贴相关的样式。

backdrop-filter

既然用到了这个属性，那我们就来认识一下这个属性吧。

backdrop-filter属性可以让元素添加图形效果，它适用于元素背后的所有元素，但是为了看到效果，元素必须带有透明度。

它的值可以是filter函数，也可以是none，none表示没有滤镜效果，如下：

blur()：模糊
brightness()：亮度
contrast()：对比度
drop-shadow()：阴影
grayscale()：灰度
hue-rotate()：色相旋转
invert()：反转
opacity()：透明度
saturate()：饱和度
sepia()：褐色
url()：引入外部滤镜

它的属性值可以是多个，用空格分隔，如下：

* {backdrop-filter: blur(10px) brightness(0.5);
}

它的各种属性值我就不一一介绍了，感兴趣的可以自行查阅，这里我们只用到了blur模糊效果。

聚焦的区域

聚焦的区域是一个圆形，我们可以通过mask-image属性来实现：

.mask {mask-image: radial-gradient(circle at 50% 50%, transparent 120px, black 150px);
}

这里的radial-gradient是径向渐变，circle是一个圆形，at 50% 50%是圆心的位置，transparent 120px是透明的半径为120px的圆，black 150px是黑色的半径为150px的圆，这样就得到了一个圆形的聚焦区域。

接下来就是要让这个聚焦区域跟随鼠标移动了。

msak属性我在之前的文章中有介绍过，感兴趣的可以去看看：CSS 的各种遮罩，让图片和背景更加多元化

聚焦区域跟随鼠标移动

聚焦区域跟随鼠标移动，我们可以通过css变量来实现：

.mask {--mouse-x: center;--mouse-y: center;mask-image: radial-gradient(circle at var(--mouse-x) var(--mouse-y),transparent 120px,black 150px);
}

这里定义了两个css变量--mouse-x和--mouse-y，分别表示鼠标的横坐标和纵坐标，然后替换mask-image中的at位置。

接下来就是要让这两个变量跟随鼠标移动了。

鼠标移动事件

鼠标移动事件，我们可以通过mousemove事件来实现：

const mask = document.querySelector('.mask');
document.addEventListener('mousemove', (e) => {mask.style.setProperty('--mouse-x', `${e.clientX}px`);mask.style.setProperty('--mouse-y', `${e.clientY}px`);
});

以上就是整个效果的实现，这里有一个细节，就是mask-image的at位置，如果是center，那么聚焦区域就是在鼠标的中心，如果是left top，那么聚焦区域就是在鼠标的左上角;

思路很简单，但是细节处理很多，这里就不一一展开了。