用css写两只会动的眼睛

具体效果可以到我的首页看看哈，类似： 👀 ，这里介绍下具体实现方法

html代码如下： #

<h1 class="container-eye">
  <div class="eye"></div>
  <div class="eye"></div>
</h1>

这里用h1主要是为了和标题行高对齐，没有其他意思。

CSS代码： #

.container-eye{
  position: absolute;
  top: 0;
  display: inline-block;
  margin-left: -26px;
  margin-bottom: 0;
  margin-top: 0;
  letter-spacing: -10px;
}
.eye {
  position: relative;
  display: inline-block;
  border-radius: 50%;
  width: 24px;
  height: 40px;
  background-color: #fff;
  border: 1px solid #999;
  margin: 0px;
  box-shadow: inset 0px 0px 3px #999;
}

.eye:before{
  content: '';
  position: absolute;
  bottom: 13px;
  right: 10px;
  width: 10px;
  height: 10px;
  background-color: #000000;
  border-radius: 50%;
  box-shadow: -1px -1px 1px 1px #514f4c, 0px 0px 1px 3px #9d5a00;
}

  .eye::after {
  position: absolute;
  bottom: 20px;
  right: 16px;
  width: 3px;
  height: 3px;
  background-color: #ffffff;
  border-radius: 50%;
  content: '';
  box-shadow: 0 0 4px 1px #ffffff;
}

这里面我们用了绝对定位，主要是为了把 👀 放到文字中间哈

动画效果 #

这里用了最简单的办法，计算眼睛转动角度，不是最好的实现，但是比较简单。

  var eye = document.querySelectorAll('.eye');
  document.addEventListener('mousemove', calculation);

  function calculation(event) {
    eye.forEach((item, index) => {
      var x = item.offsetLeft + item.clientWidth / 2; // 眼睛的x坐标
      var y = item.offsetTop + item.clientHeight / 2; // 眼睛的y坐标
      var rad = Math.atan2(event.pageX - x, event.pageY - y); // 鼠标和眼睛的坐标距离，然后用atan2函数计算出该点与(0, 0)点之间的弧度
      var rot = (rad * (180 / Math.PI) * -1) + 90 - 30; // 转换成角度
      item.style.cssText = 'transform: rotate(' + rot + 'deg)';
    })
  }