小黄人眼睛跟随鼠标移动

小黄人眼睛跟随鼠标移动

教程地址：原文地址（YouTube）

B站教程：原文转载（bilibili）

两个视频的内容相同，第二个为转载

效果图

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-TcYEdxOO-1580558297980)(演示.gif)]

代码区

html

<div class="face"> <!-- 脸部 -->
	<div class="eyes"> <!--  眼睛 -->
		<div class="eye"></div>
		<div class="eye"></div>
	</div>
</div>
<script src="js/main.js"></script>

CSS

* {
  margin: 0; /* 外边距 */
  padding: 0; /* 内边距 */
  box-sizing: border-box; /* 盒子大小规则 */
}
body{
  display: flex; /* 弹性盒模型 */
  justify-content: center; /* 主轴对齐方式 */
  align-items: center; /* 交叉轴对齐方式 */
  min-height: 100vh; /* 最小高度：100视窗大小 */
  background: #5d3800; /* 背景颜色 */
}

/* 黄色圆脸 */ 
.face{
  position: relative; /* 相对定位 */
  width: 300px; /* 宽度 */
  height: 300px; /* 高度 */
  border-radius: 50%; /* 边框圆角 */
  background: #ffcd00;
  display: flex;
  justify-content: center;
  align-items: center;
}
/* 嘴巴 */
.face::before{
  content: ''; /* 内容 */
  position: absolute;
  top: 180px; /* 距上部 */
  width: 150px;
  height: 70px;
  background: #b57700;
  border-bottom-left-radius: 70px; /* 左下圆角 */
  border-bottom-right-radius: 70px;
  transition: .5s; /* 过渡时间 */
}
/* 悬停到face时嘴就行变化 */
.face:hover::before{
  content: '';
  top: 200px;
  width: 150px;
  height: 30px;
  /* 圆角归0为矩形 */
  border-radius: 0;
}
/* 眼睛框体 */
.eyes{
  position: relative;
  top: -40px;
  display: flex;
}
/* 2只眼睛 */
.eyes .eye{
  position: relative;
  width: 80px;
  height: 80px;
  display: block;
  background-color: #fff;
  margin: 0 15px;
  border-radius: 50%;
}
/* 眼珠 */
.eyes .eye::before{
  content: '';
  position: absolute;
  top: 50%;
  left: 25px;
  transform: translate(-50%, -50%); /* x,y轴移动 */
  width: 40px;
  height: 40px;
  background: #333;
  border-radius: 50%;
}

JS

// 给body添加鼠标移动事件 eyeball
document.querySelector('body').addEventListener('mousemove', eyeball);
// 事件函数
function eyeball() {
  // 根据css选择器 获取到元素 放入数组
  var eye = document.querySelectorAll('.eye');
  // 调用数组中的每个元素
  eye.forEach(function(eye) {
    // 元素相对于窗口左边的距离  左边框的宽度
    let x = (eye.getBoundingClientRect().left + (eye.clientLeft / 2));
    // 同上
    let y = (eye.getBoundingClientRect().top + (eye.clientTop / 2));
    // pageX 鼠标指针的位置，相对于文档左边缘
    let radian = Math.atan2(event.pageX - x, event.pageY -y);
    let rot = (radian * (180 / Math.PI) * -1) + 270;
    // 修改旋转角度
    eye.style.transform = 'rotate(' + rot + 'deg)';
  })
}

教程地址：原文地址（YouTube）

B站教程：原文转载（bilibili）