前言
我们在使用电脑的时候，屏幕上的鼠标光标是最常见的一个东西了。而作为一个能经常被使用到的东西，今天我们就来尝试还原它，实现它，用CSS来实现一个自定义的鼠标光标。话不多说，咱们直接看下面的效果预览。
效果预览
以上就是最终的实现效果了，咱们接下来便一步一步来实现它。
HTML && JS
首先我们来看到HTML和JS部分，由于HTML部分比较简单，因此会将JS加入到里面一次性讲清楚。相关代码如下。
<div id="cursor"></div>
<script>
let cursor = document.querySelector("#cursor");
let body = document.querySelector("body");
document.addEventListener("mousemove", (e) => {
body.style.backgroundPositionX = e.pageX / -4 + "px";
body.style.backgroundPositionY = e.pageY / -4 + "px";
cursor.style.top = e.pageY + "px";
cursor.style.left = e.pageX + "px";
});
</script>
光标我们可以通过一个div元素来实现。创建一个id为cursor的空div元素，用于代表自定义的鼠标指针。
在JavaScript部分，将id为cursor的元素存储在cursor变量中，将body元素存储在body变量中。然后使用document.addEventListener("mousemove", (e) => { ... })添加鼠标移动事件监听器，当鼠标移动时执行回调函数。
在鼠标移动事件内部，body.style.backgroundPositionX = e.pageX / -4 + "px"根据鼠标在页面中的水平位置（e.pageX）来设置页面背景的水平移动位置，从而创建出一种鼠标跟随的效果，再通过cursor.style.left = e.pageX + "px"设置自定义鼠标指针的水平位置，使其跟随鼠标的水平移动。同理可得，body.style.backgroundPositionY = e.pageY / -4 + "px"则是通过鼠标在页面中的垂直位置（e.pageY）来设置页面背景的垂直移动位置，以实现页面背景与鼠标移动的视觉效果，并使用cursor.style.top = e.pageY + "px"设置自定义鼠标指针的垂直位置，使其跟随鼠标的垂直移动。
综上所述，这段代码通过监听鼠标移动事件，实现了一个动态鼠标跟随效果。通过调整页面背景的位置和自定义鼠标指针的位置，可以创建出一个视觉上有趣的交互效果，使用户在页面上移动鼠标时感受到视觉上的反差。
CSS
交互部分的逻辑大致是这样，接着我们来看到CSS样式处理。相关代码如下。
body {
min-height: 100vh;
background: #222;
background-image: linear-gradient(to right, #333 1px, transparent 1px),
linear-gradient(to bottom, #333 1px, transparent 1px);
background-size: 40px 40px;
}
#cursor {
position: fixed;
width: 25px;
height: 25px;
border-top: 5px solid skyblue;
border-left: 5px solid skyblue;
transform-origin: top;
transform: translate(-1px, 5px) rotate(15deg) scale(0);
transition: transform 0.1s;
pointer-events: none;
animation: animate 5s linear infinite;
}
#cursor::before {
content: " ";
position: absolute;
width: 5px;
height: 40px;
left: -2.5px;
background: skyblue;
transform-origin: top;
transform: rotate(315deg);
}
body:hover #cursor {
transform: translate(-1px, 5px) rotate(15deg) scale(1);
}
@keyframes animate {
0% {
filter: drop-shadow(0 0 5px skyblue) drop-shadow(0 0 15px skyblue)
drop-shadow(0 0 30px skyblue) hue-rotate(0deg);
}
100% {
filter: drop-shadow(0 0 5px skyblue) drop-shadow(0 0 15px skyblue)
drop-shadow(0 0 30px skyblue) hue-rotate(0deg);
}
}
上面寥寥数十行就是鼠标光标的通用样式了，也包括一些动画样式的编写，给元素加上样式是为了让实现的鼠标光标更加丰富饱满。
首先是body元素的样式，设置body元素的最小高度为视窗的100%，背景颜色为深灰色，并且通过background-image创建两个倾斜的线性渐变作为背景图案。
然后是cursor元素的样式，通过position: fixed将鼠标指针元素固定定位在屏幕上，再分别设置鼠标指针元素的宽高为25px。接着分别使用到了transform-origin，transform，transition属性让鼠标光标元素进行一些基础变换以及变换效果的过渡，这些都是很常用的样式。
接着就是#cursor::before伪元素样式，content: " "是伪元素样式中的必填项，填空意味着将伪元素的内容设置为空。再将伪元素绝对定位，并设置伪元素的宽高和位置以及背景色，最后则通过transform-origin: top来设置变换原点在顶部。
最后就是@keyframes animate关键帧动画的编写了。定义了一个动画从0% 到 100% 的变换效果，应用了滤镜效果，包括 drop-shadow 阴影和 hue-rotate 色调旋转。这段动画 animate 会无限循环，在5秒钟内完成一个完整的动画周期。
综上所述，通过这段CSS代码实现了一个带有动态效果的自定义鼠标光标。
总结
以上就是整个效果的实现过程了，代码简单易懂，非常适合入门者学习。除此之外，该效果以及代码的可拓展性很高，可以在现有基础上发散思维，创造出不一样的效果。关于该效果如果大家有更好的想法欢迎在评论区分享，互相学习。最后，完整代码在码上掘金里可以查看，如果有什么问题大家在评论区里讨论~
原文链接：https://juejin.cn/post/7347297033084862505 作者：一条会coding的Shark
