6 month 1 number , Moore Manor hand tour officially opened , Small blogger is also the first time to download , It was so much fun , So much for this blog post , Let's take a look at how to realize this lovely bird ( Demonic nature ) My little Moore !!

<> Implementation effect

Ha ha ha ha ha ha ha , Is this little Moore's head very magical , The blogger did his best ! It's cute, isn't it ~~

<> Implementation process

<>1. definition HTML label

face It's the whole round face ,eyes It's the outer box of two eyes ,nose nose ,mouse mouth
<div class="face"> <div class="eyes"> <div class="eyeIn"> <div class="eye"></
div> </div> <div class="eyeIn"> <div class="eye"></div> </div> </div> <div class
="nose"></div> <div class="mouse"></div> </div>
<>2. Draw face

Given a 400px*400px My round face , The background color is a set of light blue gradients

background: linear-gradient(rgb(132, 222, 247), rgb(14, 84, 175)): Gradient background .
box-shadow:1px 2px 15px white: Add shadows to make the hierarchy clear .
.face { position: relative; display: flex; justify-content: center; align-items
: center; width: 400px; height: 400px; border-radius: 50%; background:
linear-gradient(rgb(132, 222, 247), rgb(14, 84, 175)); box-shadow: 1px 2px 15px
white; overflow: hidden; }
<>3. Drawing elliptical eyes
.eyes .eyeIn { position: relative; width: 60px; height: 90px; display: block;
background: linear-gradient(135deg, rgb(82, 83, 83), rgb(14, 15, 15)); margin:
0 30px; border-radius: 50%; box-shadow: 0px 0px 10px rgb(54, 161, 230); }
<>4. Draw eyeballs

The eyeballs are drawn using a eye Pseudo class in the box , To define the eyes , This can be done through control eye The size of the box adjusts the rotation position of the eyeballs
.eyes .eye { position: relative; top: 20px; width: 60px; height: 60px;
border-radius: 50%; } .eyes .eye::before { content: ''; position: absolute; top:
50%; left: 15px; transform: translate(-50%, -50%); width: 20px; height: 30px;
background-color: white; border-radius: 50%; box-shadow: 0px 0px 10px white; }
<>5. Draw mouth

Drawing teeth with pseudo elements , Ugly as it is , But at least there are teeth , Do not accept rebuttal ! At the same time, add transition attributes to the mouth , Make the mouse move in with a transition effect
.mouse { position: absolute; top: 330px; width: 70px; height: 50px; box-shadow:
0px 0px 2pxrgb(106, 119, 119); border-bottom-left-radius: 50px;
border-bottom-right-radius: 50px; background: linear-gradient(rgb(244, 71, 78),
rgb(201, 20, 25)); transition: .5s; } .mouse::before { position: absolute; left:
20px; content: ''; width: 30px; height: 14px; background-color: rgb(245, 237,
230); border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; }
<>6. Mouse in Avatar

When the mouse moves into the portrait of little Moore , Put Moore's mouth away , Isn't it magic !
.face:hover .mouse { height: 20px; transition: .5s; }
<>7. Eyes follow the mouse

This part is the soul of little Moore , Realize the effect of eyes following the mouse movement , It's true. It's weird , It's like someone's staring at you !

This is about mathematics , Need to achieve the effect of the lawsuit , Need to make the mouse current position , And the center of the eye , Three points collinear of Eye Center , So we first calculate the coordinates of the center of the circle x,y In the following code, the
getBoundingClientRect() method

This method is used to get the left value of an element in the page , upper , right , The position of the browser window relative to the browser window , Returns a rectangular object , There are four attributes , namely left
,top,right,bottom. Represents the distance between each edge of the element and the top and left side of the page .

clientWidth Used to get the width of the element , Half is where the center of the circle is , So we can get the coordinates of the center of the circle (x,y)

Pass another one Math Next atan2(X,y) method , Return point (x,y) And x Angle radian system of coordinate axis , We pass in e.pageX - x, e.pageY - y
That is, the mouse's coordinates when the center of the eye circle is the coordinate origin , The resulting radian system is the radian of the mouse corresponding to the position of the line on the circle , That's the radian that the eye needs to rotate , This will rotate the eyeballs to the appropriate position , That's it , You'll find it in the following code
let rot = (rad * (180 / Math.PI) * -1) + 270
Add here 270 The purpose of this project is to learn from 0deg Position start calculation , The initial position is on the left
window.addEventListener('mousemove', (e) => { let eye = document.
querySelectorAll('.eye') eye.forEach(eye => { // Get eye center coordinates let x = (eye.
getBoundingClientRect().left) + (eye.clientWidth / 2) let y = (eye.
getBoundingClientRect().top) + (eye.clientHeight / 2) // radian let rad = Math.atan2
(e.pageX - x, e.pageY - y) // Angle of rotation let rot = (rad * (180 / Math.PI) * -1) + 270
// The eye is moved by rotation eye.style.transform = 'rotate(' + rot + 'deg)' }) })
The lovely little Moore is done , Although there are many deficiencies , But it's lovely ~~

Technology
©2019-2020 Toolsou All rights reserved,
【Java8 New features 1】Lambda Expression summary What is a process , Concept of process ?hdfs dfs Common basic commands java When creating objects, you must _Java Basic test questions Generation of random numbers + Figure guessing game When will we enter the old generation ?HDFS Common commands ( summary ) It is never recommended to spend a lot of time studying for employment pythonmacOS Big Sur The installation could not be completed Big Sur Why can't I install it ?Python pyttsx3| Text reading ( Various languages )