你看这个圆脸😁，又大又可爱~

前言

最近对 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 方面的效果，对此感兴趣的可以点赞关注一下。

最后，如果这篇文章有帮助到你，❤️关注+点赞❤️鼓励一下作者，谢谢大家

往前回顾

这么炫酷的 3D Menu 效果，真的不来看看？

产品经理：你这个效果不行，我想要一个五彩斑斓的黑！我：。。。