返回

中秋限定！让你的鼠标指针化身小玉兔

前端

中秋将至，皓月当空，喜气洋洋。为了迎接这个团圆的节日，我们不妨也让自己的电脑桌面增添一些节日气氛，让我们的鼠标指针也换上喜庆的新装，变成一只蹦蹦跳跳的小玉兔。

要实现这个创意，我们需要借助CSS和JavaScript这两位好帮手。CSS负责为小玉兔绘制出可爱的外观，而JavaScript则负责让它动起来，活灵活现地出现在你的屏幕上。

首先，我们先来用CSS为小玉兔设计造型。在CSS文件中，我们为鼠标指针添加了一个名为"cursor"的类，并设置了它的样式。在这个类中，我们可以定义小玉兔的形状、大小、颜色以及其他细节。

接着，我们再用JavaScript让小玉兔动起来。在JavaScript文件中，我们写了一段代码，利用CSS的"animation"属性为小玉兔添加了动画效果。这样，当我们移动鼠标时，小玉兔就会活蹦乱跳地跟随着我们的鼠标指针，十分可爱。

最后，我们只需要把CSS和JavaScript文件链接到我们的HTML页面中，就可以让小玉兔出现在我们的屏幕上了。是不是很简单呢？

在这个中秋佳节，就让我们一起用创意装点我们的电脑桌面，让一只可爱的小玉兔陪我们共度佳节吧！

步骤一：创建CSS文件

/* cursor.css */

.cursor {
  width: 24px;
  height: 24px;
  background-image: url("bunny.png");
  background-size: contain;
  background-repeat: no-repeat;
  position: absolute;
  top: 0;
  left: 0;
  animation: bunny-hop 1s infinite;
}

@keyframes bunny-hop {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-5px);
  }
  100% {
    transform: translateY(0);
  }
}

步骤二：创建JavaScript文件

/* cursor.js */

document.addEventListener("mousemove", (e) => {
  const cursor = document.querySelector(".cursor");
  cursor.style.top = `${e.pageY - 12}px`;
  cursor.style.left = `${e.pageX - 12}px`;
});

步骤三：创建HTML文件

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="cursor.css">
    <script src="cursor.js"></script>
  </head>
  <body>
    <div class="cursor"></div>
  </body>
</html>

快来试试吧，让你的鼠标指针在这个中秋节也穿上节日盛装，变成一只蹦蹦跳跳的小玉兔，陪你共度佳节！