先上效果（完整代码在最后）：
 实现过程（可跟着一步一步书写）：
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是两个眼睛：
<div class="face">
<div class="eye"></div>
<div class="eye"></div>
</div>
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=角度*
所以得到应该旋转角度：
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>
|
