The effect

The original code address

eyes

This part is very simple, it’s two circles, it’s very easy to make with pseudo elements, the main thing is to adjust the absolute positioning element is very annoying

nose

This part is mainly formed by the superposition of circle and triangle. Draw a triangle and circle through the border, and then place the original on the upper part of the triangle through absolute positioning adjustment

The mouth

This is the hardest part, and it’s divided into two parts, the upper lip and the mouth.

The upper lip

The idea for the upper lip is to first draw the border with two divs, then transparently remove the top and right border, then use border-radius to add a radian to make it look like a smiley face, and then use transform to rotate it. Note that the curvature of both lips is relative to the Angle of rotation.

On the left

		border-radius: 0 0 0 35px;
        transform: rotate(-20deg) translateX(-53px);
Copy the code

On the right

   border-radius: 0 0 35px 0;
   transform: rotate(20deg) translateX(53px);
Copy the code

Finally, you need to mask the highlighted border with pseudo-elements

     &:before {
        content: "";
        display: block;
        height: 30px;
        width: 7px; 
        bottom: 0;
        background: #ffe600;
        position: absolute;
      }
Copy the code

The positions of shielding elements adjusted on the left and right sides are different, because the rotation angles on both sides are different, and the starting positions of false elements are different.

&.left { border-radius: 0 0 0 35px; transform: rotate(-20deg) translateX(-53px); &:before { right: -6px; }} &.right {border-radius: 0 0 35px 0; transform: rotate(20deg) translateX(53px); &:before { left: -6px; }}Copy the code

The mouth

The mouth part is made up of two ellipses inside and outside

In the circle

The inner circle is a large ellipse, and the outer part is hidden by overflow:hidden.

Inner circle to achieve part of the code

width: 150px;
height: 1000px;
position: absolute;
bottom: 0;
left:50%;
margin-left: -75px;
background: #9b000a;
border-radius: 50%;
overflow: hidden;
Copy the code

How to draw an ellipse reference address

cylindrical

The outer circle is a semi-ellipse, by adjusting the bottom and then capturing part of itAfter the overflow: hidden

width: 200px; background: #ff485f; height:300px; position: absolute; bottom: -160px; // Notice that the whole is an ellipse and then move down to cover the outer circle. Left: 50%; margin-left: -100px; border-radius: 50% 50% 0 0/ 100% 100% 0 0;Copy the code

Next to the face

This part is also very simple, the two circles, basically adjust their position throughout the painting

.face { position: absolute; top:200px; left: 50%; width: 88px; height: 88px; background: #ff0000; border-radius: 50%; margin-left: -32px; &.left { transform: translateX(-180px); } &.right { transform: translateX(180px); }}Copy the code

Let the code move

It’s pretty simple. You use a variable to store CSS in a string,

Then use timer in JS to gradually add style in HTML, see GitHub source code for details.

Release making page

Finally, you can package the work and post it to Github page, which can be set in Github Setting For details on how to use Github Page, please refer to this articlegithub page