Use a piece of CSS code to retrieve the childhood Doraemon Happy Children's Day with the source code online display

Draw a Doraemon through CSS and retrieve childhood memories together!

Effect Picture- Online Demo -You can right-click to view the complete source code

Code decomposition


Allows you to set the rounded corners of the outer border of the element. When one radius is used, a circle is determined, and when two radii are used, an ellipse is determined. The intersection of this (ellipse) circle and the border forms a rounded corner effect.
In the development process, only one attribute value is often used, such as border-radius: 10px; students who understand this attribute should know that this is actually a shorthand, similar to padding: 10px; it actually has a radius of two dimensions, One is the horizontal dimension and the other is the vertical dimension. ** His full name is border-radius: 10px 10px 10px 10px / 10px 10px 10px 10px; / The first four values ​​are the horizontal radius of the corresponding four corners starting from the upper left corner, and then the vertical radius
Doraemon’s face is quite special. I used two semicircles to overlap each other to block the extra part.
<div class='doraemon'>  <!-- 脸部 -->  <div class='header'></div>  <div class='face'></div></div>
.doraemon {    width: 100%;    height: 350px;    position: absolute;    left: 0;    bottom: 0;} .header {    position: absolute;    top: 0;    left: 50%;    transform: translate(-50%);    background: #5087b8;    width: 700px;    height: 350px;    border-radius: 350px 350px 0 0 / 350px 350px 0 0;} .face {    position: absolute;    top: 100px;    left: 50%;    transform: translate(-50%);    width: 600px;    height: 250px;    background: #fff;    border-radius: 300px 300px 0 / 225px 225px 0 0;}



The function defines a transformation that rotates the element around a fixed point ( transform-origin specified by the  attribute, and the center of the element by default) without deformation. The specified angle defines the measure of rotation. If the angle is positive, it rotates clockwise, otherwise it rotates counterclockwise. Rotating 180° is also called point reflection.
It is used as a rotation angle, which is also divided into  rotateY(), the rotateX() function is to make an element rotate around the ordinate (vertical axis, horizontal axis) without deforming it

Because Doraemon's face is more symmetrical

<div class='eye eye-left'>  <div class='pupil'>    <div class='pupil-mask'></div>    <div class='pupil-middle'></div>    <div class='pupil-small'></div>    <div class='tear-top'></div>    <div class='tear-bottom'></div>  </div></div><div class='eye eye-right mirror'>  <div class='pupil mirror'>    <div class='pupil-mask'></div>    <div class='pupil-middle'></div>    <div class='pupil-small'></div>    <div class='tear-top'></div>    <div class='tear-bottom'></div>  </div></div>
.eye {    position: absolute;    top: 38px;    width: 136px;    height: 136px;    border-radius: 100px 60px 100px 70px / 100px 60px 100px 70px;    border: 2px solid #7f888f;    background: #fff;} .eye.eye-left {    left: 104px;} .eye.eye-right {    right: 104px;} .mirror {    transform: rotateY(180deg);     // 水平翻转}


Attributes are used to add shadow effects to the frame of the element. You can set multiple shadow effects on the same element and separate them with commas. The values ​​that can be set for this attribute include the X-axis offset, Y-axis offset, blur radius, diffusion radius, and color of the shadow.
Doraemon’s nose has made a three-dimensional effect, this time it should be box-shadow
/* 依次对应的值为 x偏移量 | y偏移量 | 阴影模糊半径 | 阴影扩散半径 | 阴影颜色 */box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
<div class='nose'>  <div class='blink'></div></div>
.nose {    position: absolute;    top: 127px;    left: 50%;    transform: translate(-50%);    width: 80px;    height: 80px;    border-radius: 50%;    background: #ae3537;    box-shadow: 2px 30px 18px -8px rgb(0 0 0 / 33%);} /* 鼻子上的光 */.nose .blink {    position: absolute;    top: 5px;    left: 20px;    width: 36px;    height: 22px;    background: #bf5d5c;    border-radius: 80px 30px 44px 20px / 60px 30px 60px 20px;}