前言
这次带来的是一个非常丝滑的鼠标移动特效，移动鼠标的时候可以有放大镜效果，具体效果可以查看下面的码上掘金。
效果预览
当鼠标移动到某一处位置时，便会出现一个类似于放大镜的效果，点击背景图片，该圆圈就会被放大，具体来说，就是背景图像会跟随鼠标移动位置发生改变。接下来就带大家来实现它。
实现部分
关于它的实现部分比较简单，主要分为 JS 部分和 CSS 部分。
主体结构
我们先创建一个 div 元素，这是这个特效的主体。在页面中定义了一个名为 banner 的 div 元素，然后通过 JavaScript 监听整个文档的鼠标移动事件。
<div class="banner"></div>
JS部分
如何通过 JavaScript 来监听整个文档的鼠标移动事件呢？当我们移动鼠标时，可以根据鼠标的位置动态设置元素的 CSS 变量值，实现了鼠标跟随的效果。具体来说，通过设置元素的 --x 和 --y 变量值为鼠标的横纵坐标，使得元素能够根据鼠标的位置进行移动。相关代码如下所示。
<script>
let pos = document.documentElement
pos.addEventListener('mousemove', e=>{
pos.style.setProperty('--x', e.clientX + 'px')
pos.style.setProperty('--y', e.clientY + 'px')
})
</script>
首先定义一个变量 pos，它指向文档的根元素。然后添加了一个鼠标移动事件监听器，当鼠标在文档上移动时，它会执行回调函数。在回调函数中，它通过设置 CSS 自定义属性来改变根元素的位置，使其跟随鼠标移动。具体来说，它设置了两个 CSS 自定义属性 --x 和 --y，分别表示鼠标的横坐标和纵坐标，而这些属性的值则通过 e.clientX 和 e.clientY 来获取。最终，根元素的位置会随着鼠标的移动而改变。
CSS部分
最后就是为整个效果添加 CSS 样式了，在 CSS 样式中，我们给 banner 元素创建了一个背景图像，该背景图像可以跟随鼠标指针的位置发生改变。clip-path: circle(75px at var(--x) var(--y)); 的作用是将元素裁剪成一个圆形区域，半径为75px，圆心位置由变量 --x 和 --y 控制。这个属性可以用来创建许多有趣的效果。
然后如何控制放大的效果呢？这里则需要通过 active 来完成。当用户在横幅上进行点击操作时，这个横幅就会进入活动状态，clip-path 属性就会被应用，并且圆形裁剪区域的圆心位置会根据鼠标点击的位置来动态调整，从而实现一个类似于放大镜的效果。
.banner:active{
clip-path: circle(200px at var(--x) var(--y));
}
clip-path 属性使用了 circle() 函数来创建一个圆形的裁剪区域，圆心的位置由变量 var(--x) 和 var(--y) 决定，半径为200px。这些变量的值可以通过 JavaScript 或者 CSS 变量来动态设置，从而实现一些交互效果。
总结
以上就是放大镜特效的实现过程了，代码简单易懂，并且可以在该代码基础上稍作修改，便可以实现更复杂的效果。总之，该特效简单而实用。
