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

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

阅读量：355 次

发布时间：2019-03-04

本文共 3656 字，大约阅读时间需要 12 分钟。

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

在这里插入图片描述

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

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){               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)`;               })        })

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=角度*

所以得到应该旋转角度：