如何实现简单的鼠标光标?这篇文章带你拿下它

前言

我们在使用电脑的时候,屏幕上的鼠标光标是最常见的一个东西了。而作为一个能经常被使用到的东西,今天我们就来尝试还原它,实现它,用CSS来实现一个自定义的鼠标光标。话不多说,咱们直接看下面的效果预览。

效果预览

以上就是最终的实现效果了,咱们接下来便一步一步来实现它。

HTML && JS

首先我们来看到HTMLJS部分,由于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元素来实现。创建一个idcursor的空div元素,用于代表自定义的鼠标指针。

JavaScript部分,将idcursor的元素存储在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-origintransformtransition属性让鼠标光标元素进行一些基础变换以及变换效果的过渡,这些都是很常用的样式。

接着就是#cursor::before伪元素样式,content: " "是伪元素样式中的必填项,填空意味着将伪元素的内容设置为空。再将伪元素绝对定位,并设置伪元素的宽高和位置以及背景色,最后则通过transform-origin: top来设置变换原点在顶部。

最后就是@keyframes animate关键帧动画的编写了。定义了一个动画从0%100% 的变换效果,应用了滤镜效果,包括 drop-shadow 阴影和 hue-rotate 色调旋转。这段动画 animate 会无限循环,在5秒钟内完成一个完整的动画周期。

综上所述,通过这段CSS代码实现了一个带有动态效果的自定义鼠标光标。

总结

以上就是整个效果的实现过程了,代码简单易懂,非常适合入门者学习。除此之外,该效果以及代码的可拓展性很高,可以在现有基础上发散思维,创造出不一样的效果。关于该效果如果大家有更好的想法欢迎在评论区分享,互相学习。最后,完整代码在码上掘金里可以查看,如果有什么问题大家在评论区里讨论~

原文链接:https://juejin.cn/post/7347297033084862505 作者:一条会coding的Shark

(0)
上一篇 2024年3月20日 下午5:04
下一篇 2024年3月20日 下午5:14

相关推荐

发表评论

登录后才能评论