你看这个圆脸😁，又大又可爱~
前言
最近对 CSS 的迷恋日益严重，之前从没想过 CSS 还能玩出花来，再配合 JS 添加一些动效，那效果真是杠杠的，今天就给大家分享一下最近学到的一个笑脸，让我们先来看一下具体的效果，如图：
当鼠标在页面上移动的时候，这个大圆脸的两只眼睛就会跟着转动；当鼠标移入到这个大圆脸中，它瞬间就会变成一个苦瓜脸，😁是不是很有趣呢？下面我们就一起来盘一下这个大圆脸盘子吧！(ps：这里绝对没有隐射任何大脸的人 - 手动狗头)。
基础搭建
我们都知道 HTML、CSS 和 JS 是好基友，俗称三剑客~~(三贱客)~~，因此要实现上面这个大脸盘子，当然是需要这三位老兄的共同努力了。首先我们还是先来看一下相关的 HTML 内容，代码如下：
<div class="face">
<div class="eyes">
<div class="eye"></div>
<div class="eye"></div>
</div>
</div>
通过上面的 HTML 就能看出，这个大脸的各个部位，主要就是两只眼睛，其它的像嘴巴是通过 CSS 的伪类来实现的。
接下来我们再来看一下 CSS 相关的代码，这里会将 CSS 代码进行拆分，方便大家的理解和学习，在前面的文章中也说过是使用 less 来编写 CSS 样式，这里就不做过多的介绍了，我们一起来看一下样式代码，首先还是最基础的清除浏览器默认样式，如下：
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #5d3800;
}
前面也介绍过为什么需要清除浏览器默认样式，不了解的可以看前面一篇文章。
当我们将浏览器的默认样式清除后，我们就可以使用 CSS 来画出这个大脸盘子了，让我们一起来看一下相关的 CSS 代码，如下：
//...other code
.face {
position: relative;
width: 300px;
height: 300px;
border-radius: 50%;
background: #ffcd00;
display: flex;
justify-content: center;
align-items: center;
box-shadow: 10px 10px 100px rgba(0, 0, 0, .2);
&::before {
content: '';
position: absolute;
top: 180px;
width: 150px;
height: 70px;
background: #b57700;
border-bottom-left-radius: 70px;
border-bottom-right-radius: 70px;
transition: 0.5s;
}
.eyes {
position: relative;
top: -40px;
display: flex;
.eye {
position: relative;
width: 80px;
height: 80px;
background: #fff;
margin: 0 15px;
border-radius: 50%;
&::before {
content: '';
position: absolute;
top: 50%;
left: 25px;
transform: translate(-50%, -50%);
width: 40px;
height: 40px;
background: #333;
border-radius: 50%;
}
}
}
}
通过上述 CSS 代码，我们就可以画出一个可爱的大脸，如下图所示：
当然，现在鼠标移入到大脸中时，它还不会瘪嘴，我们只需要添加一个 hover 效果就可以实现鼠标移入的效果了，代码如下：
//...other code
.face {
//...other code
&:hover {
&::before {
top: 210px;
width: 150px;
height: 20px;
background: #b57700;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
transition: 0.5s;
}
}
}
添加了上述的 hover 效果后，当鼠标移入到这个可爱的大脸中时，它就会变成苦瓜脸了，具体的效果如下图所示：
写到这里，这个可爱的大脸的嘴巴已经可以动起来了，但是它的两只眼睛还不能动，下面我们就需要借助 JS 这个好基友了，通过 JS 来让这两只眼睛动起来。
动起来
要让这个可爱的大脸中的两只眼睛动起来，其实也不难，只需要通过 JS 获取到这两只眼睛，然后随着我们鼠标在页面上的移动来实时获取当前的位置即可，下面我们一起来看代码，如下：
// 获取相关元素
const eyes = document.querySelectorAll('.eye');
const body = document.querySelector('body');
// 给body添加鼠标移动事件
body.addEventListener('mousemove', (event) => {
eyes.forEach((eye) => {
let x = (eye.getBoundingClientRect().left) + (eye.clientWidth / 2);
let y = (eye.getBoundingClientRect().top) + (eye.clientHeight / 2);
let radian = Math.atan2(event.pageX - x, event.pageY - y);
let rot = (radian * (180 / Math.PI) * -1) + 270;
eye.style.transform = `rotate(${rot}deg)`;
});
});
上述代码中，当鼠标在页面中移动时，我们能够获取到当前的 event 对象，然后通过遍历这两只眼睛元素，获取到每一只眼睛在当前页面上的 X轴 和 Y轴，其中最主要的一行代码就是 let radian = Math.atan2(event.pageX - x, event.pageY - y)，通过 Math.atan2 方法，我们获取到鼠标与眼睛之间的角度，关于 Math.atan2 方法可以点击这里进行查看。
最后通过 JS 来设置两只眼睛的 transform 属性，从而实现当鼠标在页面上移动时，眼睛也跟着转动。最终的实现代码可以在这里进行查看。
最后
通过 HTML、CSS、JS 这三个基佬，我们实现了这个可爱的大脸，并且顺便还学习了一个 Math 方法，后续我还会继续分享更多关于 CSS 方面的效果，对此感兴趣的可以点赞关注一下。
最后，如果这篇文章有帮助到你，❤️关注+点赞❤️鼓励一下作者，谢谢大家