preface
When I was young, I thought, how nice it would be to have A friend like Doraemon to accompany us as we grow up? Sad when someone comfort; When you want to give up, someone encourages you; Happy time, someone to share. The key is that he has a magic pocket that can do anything. Now I grow up, in turn, I hope to accompany my children like Doraemon. Therefore, as A children’s Day gift for us, we will draw A poster of doraemon, With you through CSS to retrieve the memories of childhood together.
Related knowledge points
Canvas is the first thing that comes to mind for most people who can draw in CSS, but there’s another API that shouldn’t be taken lightly. That is the border-radius that you can use to draw a curve. Next, let’s take a look at the basic usage of relevant knowledge points.
border-radius
Border-radius allows you to set the rounded corners of the outer borders of elements. Identify a circle when using one radius and an ellipse when using two. The intersection of this circle with the border creates a rounded corner effect.
border-radius: 10px;Those of you who are familiar with this property should know that this is actually a shorthand, similar topadding: 10px;It will actually have a radius of ** two dimensions, one horizontal and one vertical. ** All he wrote wasborder-radius: 10px 10px 10px 10px / 10px 10px 10px 10px; /The first four values are the horizontal radii of the four corresponding angles leading from the top left corner, followed by the vertical radii. Having said that, let’s try to draw A doraemon eye socket. Focus on theborder-radius.htmlPart of it is basicallydivI’m not going to show you one by one.
.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;
}
Copy the codeSet the corresponding horizontal and vertical radii for the four angles respectively, and the final effect is as follows:
In addition, doraemon’s face is quite special. I used two semicircles superimposed on each other to block out the excess part, and finally presented the effect like this.
<div class='doraemon'>
<! - face -- -- >
<div class='header'></div>
<div class='face'></div>
</div>
Copy the code.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;
}
Copy the code
rotate()
The rotate() function defines a transformation that rotates elements around a point (specified by the transform-origin attribute, which defaults to the center of the element) without deformation. The specified Angle defines the measure of rotation. If the Angle is positive, it rotates clockwise, otherwise it rotates counterclockwise. A rotation of 180° is also known as point reflection.
RotateY (), rotateX() is used to rotate an element around the vertical axis (vertical axis, horizontal axis) without deforming it.
Because Doraemon’s face is symmetrical, with A blue, round, fat face, we can easily draw the other eye socket using this API (lazy people have many ways to lazy). Also, draw his cat’s beard.
<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>
Copy the code.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); // horizontal flip}Copy the code
box-shadow
The box-shadow** attribute is used to add a shadow effect to the frame of an element. You can set multiple shadow effects on the same element and separate them with commas. The settable values for this property include the X-axis offset, Y-axis offset, blur radius, diffusion radius, and color ** of the shadow.
Doraemon’s nose on the poster has made A three-dimensional effect, and then it’s time for box-shadow. In fact, as long as you know what the corresponding value represents, the problem will be solved. Let’s take A look at A simple use example.
/ *, in turn, the corresponding value of x offset | y offset | | | fuzzy shadow radius shadow diffusion radius of the shadow color * /
box-shadow: 2px 2px 2px 1px rgba(0.0.0.0.2);
Copy the codeWell, it looks very simple, very clear, and then let’s start drawing his nose.
<div class='nose'>
<div class='blink'></div>
</div>
Copy the code.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%);
}
/* Light on nose */
.nose .blink {
position: absolute;
top: 5px;
left: 20px;
width: 36px;
height: 22px;
background: #bf5d5c;
border-radius: 80px 30px 44px 20px / 60px 30px 60px 20px;
}
Copy the code
Summon Doraemon
Finally, it’s time to put all the pieces together. The decision is yours. Come out, Doraemon.
conclusion
Nobita and Shizuka are finally together, why are you still alone (I mean Doraemon, hahaha)? In real life, there are many Doraemon, who love your family, help your friends, enlighten your teachers, and guide your boss. Finally, I wish everyone a happy Children’s Day!