鼠标跟着我的视线动了？快来看看这个鼠标跟随效果

前段时间，摸金群的小伙伴分享了一个鼠标跟随效果的网站。网页打开后，屏幕上的眼睛会随着鼠标移动的方向而移动，并且还会眨眼。如果鼠标长时间不动，眼睛还会闭起来，很是可爱。

这种鼠标跟随效果十分有趣，我被它深深吸引了，于是决定自己动手制作一个类似的效果。花了整整一个晚上，终于把这个鼠标跟随效果做出来了，分享给大家。

想要实现鼠标跟随效果，我们需要用到HTML、CSS和JavaScript这三种技术。

首先，我们需要在HTML中创建一个div元素，用它来表示眼睛。

<div class="eye"></div>

然后，我们需要在CSS中为眼睛添加样式。

.eye {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: black;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

接下来，我们需要在JavaScript中为眼睛添加事件监听器，以便在鼠标移动时移动眼睛。

document.addEventListener("mousemove", function(e) {
  var eye = document.querySelector(".eye");
  var x = e.clientX;
  var y = e.clientY;
  eye.style.left = (x - eye.offsetWidth / 2) + "px";
  eye.style.top = (y - eye.offsetHeight / 2) + "px";
});

最后，我们需要在JavaScript中为眼睛添加一个定时器，以便在鼠标长时间不动时闭上眼睛。

var timer = null;
document.addEventListener("mousemove", function() {
  clearTimeout(timer);
  timer = setTimeout(function() {
    var eye = document.querySelector(".eye");
    eye.classList.add("closed");
  }, 5000);
});

当鼠标长时间不动时，眼睛就会闭起来，过了5秒钟后，眼睛又会睁开。

以上便是鼠标跟随效果的实现原理。大家可以根据自己的喜好进行修改，做出自己喜欢的样子。