使用 CSS 和 JS 设计跟随鼠标光标的笑脸眼睛

想要增加网站的趣味性，有时候可以加入一些小的交互效果，比如让笑脸眼睛跟随鼠标光标移动。下面我们就来介绍如何使用 CSS 和 JS 来实现这个效果。

HTML 代码

首先，在 HTML 代码中添加一个 div，作为笑脸眼睛的容器。代码如下：

<div id="smiley">
  <div id="eye-left"></div>
  <div id="eye-right"></div>
</div>

注：为了方便演示，我们只设计了笑脸的眼睛。

CSS 代码

接着，我们在 CSS 中定义笑脸眼睛的样式。注意，其中 eye-left 和 eye-right 分别代表左右眼睛。代码如下：

#smiley {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: yellow;
}

#eye-left,
#eye-right {
  position: absolute;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: black;
  top: 40%;
}

#eye-left {
  left: 30%;
}

#eye-right {
  right: 30%;
}

注：我们定义了笑脸眼睛的位置、尺寸、形状和颜色。

JS 代码

最后，我们使用 JavaScript 使笑脸眼睛跟随鼠标光标。代码如下：

var eyeLeft = document.getElementById("eye-left");
var eyeRight = document.getElementById("eye-right");
var smiley = document.getElementById("smiley");

document.onmousemove = function (e) {
    var x = e.clientX * 100 / window.innerWidth + "%";
    var y = e.clientY * 100 / window.innerHeight + "%";

    eyeLeft.style.left = x;
    eyeLeft.style.top = y;

    eyeRight.style.left = x;
    eyeRight.style.top = y;

    smiley.setAttribute("style", "top:" + y + "; left:" + x + "; transform: translate(-" + x + ", -" + y + ");");
}

注：我们定义了 smiley、eyeLeft 和 eyeRight 三个变量，分别代表笑脸眼睛的容器和两只眼睛。然后使用 onmousemove 事件，获取鼠标光标的位置，将眼睛的位置移动到相应位置，最后将笑脸容器的位置也移动到相应位置。

效果演示

在浏览器中运行代码片段，您将会看到跟随鼠标光标的笑脸眼睛。