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

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

通过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函数,也可以是nonenone表示没有滤镜效果,如下:

  • 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位置。

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

css 变量的使用可以参考:CSS变量对JS交互组件开发带来的提升与变革

鼠标移动事件

鼠标移动事件,我们可以通过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-imageat位置,如果是center,那么聚焦区域就是在鼠标的中心,如果是left top,那么聚焦区域就是在鼠标的左上角;

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

目录
相关文章
|
机器学习/深度学习 编解码
有手就行?把大象P转身只需拖动鼠标,华人一作DragGAN爆火(2)
有手就行?把大象P转身只需拖动鼠标,华人一作DragGAN爆火
131 0
|
机器学习/深度学习 计算机视觉 网络架构
有手就行?把大象P转身只需拖动鼠标,华人一作DragGAN爆火(1)
有手就行?把大象P转身只需拖动鼠标,华人一作DragGAN爆火
168 0
|
前端开发 JavaScript
「寒草的中秋献礼🥮,实现30s前端创意动画」陪你看日落和月升|与你赏星空和诗歌
「寒草的中秋献礼🥮,实现30s前端创意动画」陪你看日落和月升|与你赏星空和诗歌
283 1
和平精英-缩放案例
和平精英-缩放案例
275 0
|
前端开发 JavaScript API
贝塞尔曲线在前端,走近她,然后爱上她
今天我们聊聊我们经常用的CSS3动画里面的贝尔赛曲线,希望能做到,她认识你,你也熟悉她! 本文源码: Bezier 看完你就懂了一半,动手你就成功了另外一半!
263 0
贝塞尔曲线在前端,走近她,然后爱上她
|
存储 编解码 安全
99行代码实现冰雪奇缘特效的「太极」再进化,胡渊鸣团队、快手等联合打造
99 行代码实现《冰雪奇缘》特效的续集来了,太极编译器再次升级。
257 0
99行代码实现冰雪奇缘特效的「太极」再进化,胡渊鸣团队、快手等联合打造
|
机器学习/深度学习 消息中间件 人工智能
爱奇艺蒙版AI:弹幕穿人过,爱豆心中坐
作为(伪)AI 行业从业者,之心编辑部里的小伙伴们自认都能够以不错的置信度人工识别「人工智能与人工智障」。但是,当我把下面这张爱奇艺 app 的截图放在大家面前时,编辑部的「识别器」们纷纷表示,这次置信度不高。
433 0
爱奇艺蒙版AI:弹幕穿人过,爱豆心中坐
|
人工智能 算法 机器人
机器人眼中的光影世界
我们开发程序来进行照片中的人脸识别,或者来统计交通阻塞中的汽车数量,我们将自己眼中的世界强加给电脑,因为我们已经习惯性的他们当成了工具,一个帮助我们更好了解自身世界的工具。
188 0
|
存储 JavaScript 前端开发
ThingJS教你开发物体爆炸图,3D创业团队松一口气啦!
塌陷不能把模型变小,但是可以减少对内存的占用。
ThingJS教你开发物体爆炸图,3D创业团队松一口气啦!