使用 CSS 和 JS 设计跟随鼠标光标的笑脸眼睛
javascriptweb developmentfront end technology
使用 JavaScript、HTML 和 CSS 制作动画的脸部。脸部将与光标沿同一方向移动。这是基本的 CSS 和 JavaScript 效果之一。对于新手来说，它是学习伪元素概念的最佳示例之一。
在安排和构建网站页面时，CSS 更有用且必不可少。由于 JavaScript 的不断发展，网站页面现在可以拥有更多功能和协作。
每个软件都支持 CSS，但只有功能程序才支持 JavaScript。您可以使用 JavaScript 在单击特定 HTML 和 CSS 元素时创建响应。
方法 - 脸部的基本概念来自 CSS。
在这种情况下，将使用 CSS 和少量 JavaScript 来创建整个动画。我们将主要使用 CSS 创建卡通脸部，并使用 JavaScript 增强脸部的眼球流动。主要概念是脸部的眼睛将沿着鼠标指针的方向移动，当鼠标触摸脸部时，鼠标会闭上嘴巴，同时张开嘴巴大笑。
HTML 源代码 − 我们将使用 HTML 创建脸部的基本结构。我们将获取几个 div 并为它们分配一个类名，以便我们之后可以对其进行自定义。
<div class="myFace">
<div class="mytinyEyes">
<div class="tinyEye"></div>
<div class="tinyEye"></div>
</div>
</div>
<div class="myFace">
<div class="mytinyEyes">
<div class="tinyEye"></div>
<div class="tinyEye"></div>
</div>
</div>
CSS 源代码 - 特定 div 的区域将使用 CSS 定义，然后我们将添加一些 CSS 属性，如边框半径和背景颜色，使该部分具有圆形、卡通的外观。此外，我们必须使用悬停效果，例如当鼠标指针悬停在脸上时使嘴巴闭合，以使其看起来更美观、更逼真。
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #b37208;
}
.myFace {
position: relative;
width: 310px;
height: 310px;
border-radius: 50%;
background-color: #ffcd00;
display: flex;
justify-content: center;
align-items: center;
margin: 10px;
}
.myFace::before {
content: "";
position: absolute;
top: 190px;
width: 160px;
height: 80px;
background: #c810dc;
border-bottom-left-radius: 80px;
border-bottom-right-radius: 80px;
transition: 0.5s;
}
.myFace:hover::before {
top: 210px;
width: 150px;
height: 20px;
background: #c810dc;
border-bottom-left-radius: 0px;
border-bottom-right-radius: 0px;
}
.mytinyEyes {
position: relative;
top: -40px;
display: flex;
}
.mytinyEyes .tinyEye {
position: relative;
width: 90px;
height: 90px;
display: block;
background: #fff;
margin: 0 15px;
border-radius: 50%;
}
.mytinyEyes .tinyEye::before {
content: "";
position: absolute;
top: 50%;
left: 30px;
transform: translate(-50%, -50%);
width: 50px;
height: 50px;
background: #333;
border-radius: 50%;
}
</style>
JavaScript 源代码 − 由于 tinyEyeball 能够沿鼠标指针方向移动，因此我们在此额外使用了少量 JavaScript。我们将首先创建一个名为 tinyEyeball 的函数，然后声明变量。由于此代码中没有任何内容可打印，因此不会使用 document.write。但是，我们需要旋转眼球，因此我们使用样式以及类名"tinyEye"来实现。接下来，将函数更改为"rotate("+rot+"deg)"。最终，我们的眼睛将准备好移动。
<script>
document.querySelector("body").addEventListener("mousemove", tinyEyeball);
function tinyEyeball() {
var tinyEye = document.querySelectorAll(".tinyEye");
tinyEye.forEach(function(tinyEye) {
// EyeWidth 和 EyeHeight 是变量，其中 EyeWidth 代表
// 鼠标的 eyeWidth 坐标，EyeHeight 代表其高度。
let eyeWidth = tinyEye.getBoundingClientRect().left + tinyEye.clientWidth / 2;
let eyeHeight = tinyEye.getBoundingClientRect().top + tinyEye.clientHeight / 2;
let radian = Math.atan2(event.pageX - eyeWidth, event.pageY - eyeHeight);
// 旋转在变量中称为 rot。
let rot = radian * (190 / Math.PI) * -1 + 280;
tinyEye.style.transform = "rotate(" + rot + "deg)";
});
}
</script>
示例
The complete HTML, CSS, and JavaScript source code is available below.
<!DOCTYPE html>
<html>
<title>Design Smiley myFace mytinyEyes that follow Mouse Cursor using CSS and JS - TutorialsPoint
</title>
<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">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #b37208;
}
.myFace {
position: relative;
width: 310px;
height: 310px;
border-radius: 50%;
background-color: #ffcd00;
display: flex;
justify-content: center;
align-items: center;
margin: 10px;
}
.myFace::before {
content: "";
position: absolute;
top: 190px;
width: 160px;
height: 80px;
background: #c810dc;
border-bottom-left-radius: 80px;
border-bottom-right-radius: 80px;
transition: 0.5s;
}
.myFace:hover::before {
top: 210px;
width: 150px;
height: 20px;
background: #c810dc;
border-bottom-left-radius: 0px;
border-bottom-right-radius: 0px;
}
.mytinyEyes {
position: relative;
top: -40px;
display: flex;
}
.mytinyEyes .tinyEye {
position: relative;
width: 90px;
height: 90px;
display: block;
background: #fff;
margin: 0 15px;
border-radius: 50%;
}
.mytinyEyes .tinyEye::before {
content: "";
position: absolute;
top: 50%;
left: 30px;
transform: translate(-50%, -50%);
width: 50px;
height: 50px;
background: #333;
border-radius: 50%;
}
</style>
</head>
<body>
<div class="myFace">
<div class="mytinyEyes">
<div class="tinyEye"></div>
<div class="tinyEye"></div>
</div>
</div>
<div class="myFace">
<div class="mytinyEyes">
<div class="tinyEye"></div>
<div class="tinyEye"></div>
</div>
</div>
<script>
document.querySelector("body").addEventListener("mousemove", tinyEyeball);
function tinyEyeball() {
var tinyEye = document.querySelectorAll(".tinyEye");
tinyEye.forEach(function(tinyEye) {
// EyeWidth 和 EyeHeight 是变量，其中 EyeWidth 代表鼠标的 eyeWidth 坐标，EyeHeight 代表其高度。
let eyeWidth = tinyEye.getBoundingClientRect().left + tinyEye.clientWidth / 2;
let eyeHeight = tinyEye.getBoundingClientRect().top + tinyEye.clientHeight / 2;
let radian = Math.atan2(event.pageX - eyeWidth, event.pageY - eyeHeight);
// 旋转在变量中称为 rot。
let rot = radian * (190 / Math.PI) * -1 + 280;
tinyEye.style.transform = "rotate(" + rot + "deg)";
});
}
</script>
</body>
</html>
在鼠标指针到达脸部之前，您将看到此屏幕。
接下来，在鼠标指针到达屏幕后，您将看到此显示。眼球转动。它 闭上嘴巴，微笑，然后再次张开，如下所示。
