眼睛跟随鼠标转动的小黄人 html+css+js

谁践踏了优雅 2022-11-14 10:17 261阅读 0赞

## 先上效果（完整代码在最后）： ##

![在这里插入图片描述][20210328172213845.gif_pic_center]

## 实现过程（可跟着一步一步书写）： ##

**1. 先设置基本的css样式，让body高度为100vh后，用flex布局让其子元素居中对齐，（这几行代码直接复制过去就行）：**

*{ 
                padding: 0;
                margin: 0;     
            }
     body{ 
                height: 100vh;
                display: flex;
                justify-content: center;
                align-items: center;
                background-color: rgb(11, 12, 26);
            }

display: flex;  
justify-content: center;  
align-items: center;子元素居中。  
background-color: rgb(11, 12, 26);页面背景色。

**2. 开始正式实现，先定义标签，.face是整个脸，.eye是两个眼睛：**

**3. 设置.face的样式，宽高等：**

.face{ 
               width: 200px;
               height: 200px;
               border-radius: 50%;
               background: linear-gradient(180deg,rgb(252, 207, 5) ,rgb(255, 240, 36));
               position: relative;
               box-shadow: inset 0 0 3px rgb(15, 15, 9),
               inset 0 0 5px rgb(15, 15, 9);
               
            }

border-radius: 50%; 角弧度  
background: linear-gradient(180deg,rgb(252, 207, 5) ,rgb(255, 240, 36)); 渐变颜色。  
position：relative；相对定位。  
box-shadow：…；内阴影。

**4.用双伪类定义嘴巴：**

.face::after{ 
                content: '';
                position: absolute;
                bottom: 12%;
                left: 50%;
                transform: translateX(-50%);
                width: 90px;
                height: 40px; 
                background-color: rgb(255, 199, 45);
                border-radius:  0 0 70px 70px;
                box-shadow: inset 0 0 5px rgb(53, 53, 53);
            }

position: absolute;  
bottom: 12%;  
left: 50%;  
transform: translateX(-50%); 绝对定位在合适的位置，  
background-color：…背景色。  
border-radius：…；四个角每个角的弧度。  
box-shadow：…内阴影。

**5. 设置眼睛的基本样式，宽高，颜色等，再给两个眼睛定位相应的位置：**

.eye{ 
                 position: absolute;
                 width: 60px;
                 height: 60px;
                 border-radius: 50%;
                 background-color: #fff;
                 box-shadow: inset 0 0 5px rgb(58, 58, 58);
             }
              .face .eye:nth-child(1){ 
                 top: 26%;
                 left: 12%;
             }
             .face .eye:nth-child(2){ 
                 top: 26%;
                 right: 12%;
             }

**6.用双伪类定义眼球，宽高，角度，阴影等：**

.eye::after{ 
                 content: '';
                 position: absolute;
                 top: 50%;
                 left: 5%;
                 transform: transLateY(-50%);
                 width: 50%;
                 height: 50%;
                 background-color: #000;
                 border-radius: 50%;
                 box-shadow: inset 0 0 3px white,
                 inset 0 0 5px white;
             }

top: 50%;  
left: 5%;  
transform: transLateY(-50%); 设置一个初始位置。

**7. js部分，实现眼睛随鼠标移动：**  
原理：通过鼠标位置给眼睛设置对应的旋转rotate角度。

var eye = document.querySelectorAll(".eye");获取眼睛元素。  
window.addEventListener(‘mousemove’,function(event)\{…\} ；给页面绑定鼠标移动事件。  
eye.forEach(function(eye)\{…\}； **forEcah（）方法**，给数组里每个元素，也就是两个眼睛，都执行一次里面的函数。  
**Math.atan2(…）方法**，他能返回某坐标相对于X轴的弧度。  
event.pageX 鼠标相对于页面左侧距离。  
event.pageY 鼠标相对于页面顶侧距离。  
eye.getBoundingClientRect().left 眼睛相对于页面左侧距离。  
eye.getBoundingClientRect().top 眼睛相对于页面顶侧距离。  
eye.clientLeft 眼睛左边框宽度。  
eye.clientTop 眼睛上边框宽度。  
弧度换成角度：弧度 ×180/3.14=角度\*  
所以得到应该旋转角度：  
angle \* 180 / Math.PI \* -1 - 90  
**Math.PI就是π**  
最后再给.eye设置rotate旋转就好。

## 完整代码： ##

<!DOCTYPE html>
    <html lang="zh-CN">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style> *{ padding: 0; margin: 0; } body{ height: 100vh; display: flex; justify-content: center; align-items: center; background-color: rgb(11, 12, 26); } .face{ width: 200px; height: 200px; border-radius: 50%; background: linear-gradient(180deg,rgb(252, 207, 5) ,rgb(255, 240, 36)); position: relative; box-shadow: inset 0 0 3px rgb(15, 15, 9), inset 0 0 5px rgb(15, 15, 9); } .face::after{ content: ''; position: absolute; bottom: 12%; left: 50%; transform: translateX(-50%); width: 90px; height: 40px; background-color: rgb(255, 199, 45); border-radius: 0 0 70px 70px; box-shadow: inset 0 0 5px rgb(53, 53, 53); } .eye{ position: absolute; width: 60px; height: 60px; border-radius: 50%; background-color: #fff; box-shadow: inset 0 0 5px rgb(58, 58, 58); } .eye::after{ content: ''; position: absolute; top: 50%; left: 5%; transform: transLateY(-50%); width: 50%; height: 50%; background-color: #000; border-radius: 50%; box-shadow: inset 0 0 3px white, inset 0 0 5px white; } .face .eye:nth-child(1){ top: 26%; left: 12%; } .face .eye:nth-child(2){ top: 26%; right: 12%; } </style>
    </head>
    <body>
        
           <div class="face">
                <div class="eye"></div>
                <div class="eye"></div>
           </div>
        <script> var eye = document.querySelectorAll(".eye"); window.addEventListener('mousemove',function(event){ eye.forEach(function(eye){ let angle = Math.atan2(event.pageX-eye.getBoundingClientRect() .left-eye.clientLeft/2,event.pageY-eye.getBoundingClientRect().top -eye.clientTop/2); let rot = angle * 180 / Math.PI * -1 - 90 ; eye.style.transform = `rotate(${ rot}deg)`; }) }) </script>
    </body>
    </html>

## 总结： ##

热烈宣布（敲锣打鼓），我的B站账号地址：**https://space.bilibili.com/176586698**  
~泪目( Ĭ ^ Ĭ )~

**其它文章：**  
[炫彩流光文字 html+css][html_css]  
[气泡浮动背景特效 html+css][html_css 1]  
[简约时钟特效 html+css+js][html_css_js]  
[赛博朋克风格按钮 html+css][html_css 2]  
[仿网易云官网轮播图 html+css+js][html_css_js 1]  
[水波加载动画 html+css][html_css 3]  
[导航栏滚动渐变效果 html+css+js][html_css_js 2]  
[书本翻页 html+css][html_css 4]  
[3D立体相册 html+css][3D_ html_css]  
[霓虹灯绘画板效果 html+css+js][html_css_js 3]  
[记一些css属性总结（一）][css]  
[Sass总结笔记 ][Sass_]  
…等

[20210328172213845.gif_pic_center]: /images/20221022/10c45971b86540359a21ecd8b2b3da52.png
[html_css]: https://blog.csdn.net/luo1831251387/article/details/113838748
[html_css 1]: https://blog.csdn.net/luo1831251387/article/details/113657124
[html_css_js]: https://blog.csdn.net/luo1831251387/article/details/113436552
[html_css 2]: https://blog.csdn.net/luo1831251387/article/details/113360844
[html_css_js 1]: https://blog.csdn.net/luo1831251387/article/details/114393724
[html_css 3]: https://blog.csdn.net/luo1831251387/article/details/111714413
[html_css_js 2]: https://blog.csdn.net/luo1831251387/article/details/111601962
[html_css 4]: https://blog.csdn.net/luo1831251387/article/details/111398881?spm=1001.2014.3001.5502
[3D_ html_css]: https://blog.csdn.net/luo1831251387/article/details/111032274?spm=1001.2014.3001.5502
[html_css_js 3]: https://blog.csdn.net/luo1831251387/article/details/114338506
[css]: https://blog.csdn.net/luo1831251387/article/details/111320280
[Sass_]: https://blog.csdn.net/luo1831251387/article/details/113179630