一个轻量级的jQuery插件可以让你创建有趣的交互式眼睛，跟随光标的移动，让你的网站栩栩如生

参见：

• 让眼睛看着光标移动-jQuery BeautifulEyes
• 动画眼睛移动时跟随光标-jqEye

如何使用它:

1.在网页中添加眼睛。

<div class="eyes">
  <div class="eye">
    <div class="eye-retina"></div>
  </div>
  <div class="eye">
    <div class="eye-retina"></div>
  </div>
</div>

/* example CSS */
.eyes {
  width: 200px;
  height: 100px;
  position: relative;
  border-radius: 100px / 50px;
  background-color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.eye {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background-color: #666666;
  position: absolute;
  top: 10%;
  transition: transform .2s ease-in-out;
}

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

2.加载jquery.eyes-follow-mouse.js在jQuery之后。就是这样。

<!-- jQuery is required -->
<script src="/path/to/cdn/jquery.min.js"></script>

<!-- jQuery eyes-follow-mouse.js -->
<script src="/path/to/jquery.eyes-follow-mouse.js"></script>

预览截图

创建跟随鼠标 眼睛 jQuery Eyes Follow Mouse.js