資料結構
網路
關係資料庫管理系統
作業系統
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 次瀏覽
廣告