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

本文将介绍如何使用 CSS 和 JS 来创建一个跟随鼠标光标移动的笑脸眼睛，以及一些有关如何创建这个效果的技巧和提示。

实现效果

在代码实现过程中，我们将创建一个圆形的脸，以及两只圆形眼睛，其中眼睛会跟随鼠标光标移动。

HTML 结构

首先，我们需要为笑脸眼睛创建一个 HTML 结构。这里我们只需要创建一个 div 元素，它将包含笑脸和眼睛元素。

<div class="face">
  <div class="eye eye-left"></div>
  <div class="eye eye-right"></div>
</div>

CSS 样式

接下来，我们需要为我们的笑脸眼睛添加 CSS 样式。我们将使用 CSS 来创建一个带圆角的圆形笑脸，并将其与圆形眼睛以及中心点对齐。

.face {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100px;
  height: 100px;
  margin-top: -50px;
  margin-left: -50px;
  border-radius: 50%;
  background-color: yellow;
}

.eye {
  position: absolute;
  width: 30px;
  height: 30px;
  top: 30%;
  border-radius: 50%;
  background-color: black;
}

.eye-left {
  left: 25%;
}

.eye-right {
  right: 25%;
}

现在，我们已经创建了一个黄色的笑脸和两个黑色的圆形眼睛。但是我们还没有实现鼠标移动跟随眼睛的效果。

JS 代码

为了实现这一效果，我们需要使用 JavaScript。具体来说，需要在网页上添加一个事件监听器，监测鼠标光标的位置，并随着鼠标移动来改变两个眼睛的位置。

首先，我们需要定义一些变量来存储眼睛元素的位置：

var $eyes = $('.eye');
var leftEye = $eyes.filter('.eye-left');
var rightEye = $eyes.filter('.eye-right');

接下来，我们需要为整个文档添加一个鼠标移动事件监听器，并在回调中更新眼睛元素的位置：

$(document).mousemove(function (event) {
  var x = event.pageX;
  var y = event.pageY;
  
  // 计算左右眼睛相对于鼠标的偏移量
  var lx = leftEye.offset().left + 15 - x;
  var ly = leftEye.offset().top + 15 - y;
  var rx = rightEye.offset().left + 15 - x;
  var ry = rightEye.offset().top + 15 - y;
  
  // 根据偏移量计算眼睛的旋转角度
  var langle = Math.atan2(ly, lx) * 180 / Math.PI;
  var rangle = Math.atan2(ry, rx) * 180 / Math.PI;
  
  // 将旋转角度应用到眼睛元素
  leftEye.css({
    'transform': 'rotate(' + langle + 'deg)'
  });
  
  rightEye.css({
    'transform': 'rotate(' + rangle + 'deg)'
  });
});

现在，我们已经能够实现笑脸眼睛跟随鼠标光标移动的效果了。

结论

本文介绍了如何使用 CSS 和 JavaScript 创建跟随鼠标光标移动的笑脸眼睛效果。我们学习了如何使用 CSS 创造一个圆形元素和两个圆形的眼睛，并将它们用 JS 代码与鼠标位置对齐。这个效果可以用于网页设计中，为页面增添一些趣味性。