数据结构
网络
关系数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
时尚研究
法律研究使用 CSS 和 JS 设计跟随鼠标光标移动的笑脸眼睛
一个使用 JavaScript、HTML 和 CSS 制作动画的脸部。脸部会随着光标移动的方向移动。这是基本的 CSS 和 JavaScript 效果之一。对于新手来说，它是学习伪元素概念的最佳示例之一。
在安排和构建网站页面方面，CSS 更加实用和必不可少。由于 JavaScript 的持续发展，网站页面现在可以拥有更多功能和协作。
所有软件都支持 CSS，但 JavaScript 仅受功能程序支持。当单击特定的 HTML 和 CSS 元素时，您可以使用 JavaScript 为其创建响应。
方法 - 脸部的基本概念是从 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 源代码 - 将使用 CSS 定义特定 div 的区域，然后我们将添加一些 CSS 属性，如 border-radius 和背景颜色，使该部分呈现圆形、卡通化的外观。此外，我们必须使用悬停效果，例如在鼠标指针悬停在脸上时使嘴巴闭合，以使外观更美观和逼真。
<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。但是，我们需要旋转眼球，因此我们使用 style 以及类名“tinyEye”来执行此操作。接下来，将函数更改为“rotate(“+rot+”deg”)”。最终，我们的眼睛将准备好移动。
<script>
document.querySelector("body").addEventListener("mousemove", tinyEyeball);
function tinyEyeball() {
var tinyEye = document.querySelectorAll(".tinyEye");
tinyEye.forEach(function(tinyEye) {
// EyeWidth & EyeHeight are variables, where EyeWidth stands for the
// mouse's eyeWidth coordinate and EyeHeight for its height.
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);
// Rotate is referred to as rot in a variable.
let rot = radian * (190 / Math.PI) * -1 + 280;
tinyEye.style.transform = "rotate(" + rot + "deg)";
});
}
</script>
示例
完整的 HTML、CSS 和 JavaScript 源代码如下所示。
<!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 are variables, where EyeWidth stands for the
// mouse's eyeWidth coordinate and EyeHeight for its height.
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);
// Rotate is referred to as rot in a variable.
let rot = radian * (190 / Math.PI) * -1 + 280;
tinyEye.style.transform = "rotate(" + rot + "deg)";
});
}
</script>
</body>
</html>
在鼠标指针出现在脸上之前，您将看到此屏幕。
接下来，在鼠标指针出现在屏幕上后，您将看到此显示。眼球旋转。它闭上嘴巴，微笑，然后再次张开，如下所示。
更新于：2022-12-09
832 次浏览
广告