This is the thirteenth day of my participation in the Gengwen Challenge. For more details, see: Gengwen Challenge

June 1, Moore manor mobile game officially opened, small bloggers are the first time to download, really too fun, so that there is this blog, let’s see how to achieve this lovely (magic) little Moore!!

Implementation effect

Ha ha ha ha ha, the little mole face whether very ones, bloggers tried! Is also very cute ~~

The implementation process

1. Define HTML tags

Face is the whole round face, eyes is the outer box of the two eyes, nose, mouse

<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>
Copy the code

2. Shape your face

Given a 400px by 400px round face, the background color is a set of pale blue gradiens

Background: Linear gradient(RGB (132, 222, 247), RGB (14, 84, 175)) Box-shadow: 1px, 2px, 15px White: Add shadow for layer.

.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;
}
Copy the code

3. Draw oval 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);
}
Copy the code

4. Draw your eyes

The drawing of the eyes uses a pseudo-class in an eye box to define the eyes, so that the size of the eye box can be controlled to adjust the rotation position of the eyes

.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;
}
Copy the code

5. Draw the mouth

Using pseudo elements to draw the tongue, although very ugly, but at least there is a tongue, do not accept refutation! Also add a transition property to the mouth to make it transition when the mouse moves in

.mouse {
    position: absolute;
    top: 330px;
    width: 70px;
    height: 50px;
    box-shadow: 0px 0px 2px rgb(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;
}
Copy the code

6. Move the mouse to the avatar

When the mouse moved into the little Moore head, let the little Moore mouth closed, very magic!

.face:hover .mouse {
    height: 20px;
    transition:.5s;
}
Copy the code

7. Follow the mouse with your eyes

This part is the soul of little Moore, the realization of the eye to follow the mouse movement effect, is a little weird, as if someone is staring at you!

This is a mathematical problem, you need to achieve the effect described, you need to make the current position of the mouse and the center of the eye, the center of the eye three points collinear, so we first calculate the coordinates of the center of the circle x,y using the getBoundingClientRect() method in the following code

This method gets the left, top, right, and bottom positions of an element in the page relative to the browser window. It returns a rectangular object with four properties: left, top, Right, and bottom. Represents the distance of each edge from the top and left of the page, respectively.

ClientWidth is used to get the element width, half of which is where the center of the circle is, so that we can get the coordinates of the center (x,y).

Math (atan2(X,y)) returns the Angle radians between the point (X,y) and the X-axis by passing in e.proex – X, e.proey – y So the radian system is the radian of the mouse to the straight line on the circle, which is the radian of the eye that needs to be rotated, so that you can rotate the eye to the right position, and you can do that, as you’ll see in the code below

let rot = (rad * (180 / Math.PI) * -1) + 270
Copy the code

The purpose of adding 270 here is to start at 0deg, where the eye is on the left

window.addEventListener('mousemove'.(e) = > {
    let eye = document.querySelectorAll('.eye')
    eye.forEach(eye= > {
        // Get the coordinates of the eye center
        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)
        // The Angle of rotation
        let rot = (rad * (180 / Math.PI) * -1) + 270
        // Make the eyes move by rotating
        eye.style.transform = 'rotate(' + rot + 'deg)'})})Copy the code

Cute little Moore is finished, although there are many shortcomings, still pretty cute drop ~~,