The 2023 Chinese New Year is approaching. Although I am still working, I am already excited. I sigh that 2022 will eventually pass. Let’s celebrate the 2023 Year of the Rabbit. Let me use the knowledge of css3 code I have learned to realize a beloved second kicker with excitement.
Table of contents
2. Realize the main cylindrical part of the second kick
3. Realize the top and bottom sealing parts
4. Realization of fuse (cannon wilting)
5. CSS writing order description
1. Implementation idea
Realize the main area by laying out divs, and draw a cylindrical shape;
Use the before after pseudo-class to seal the top and bottom of the cylinder;
And add a shadow effect to make the effect more realistic;
Add a fuse (I don’t know what you call it, we call it a cannon), and make a transform rotation effect, which is more conducive to the ignition of the friends.
2. Realize the main cylindrical part of the second kick
Here is mainly to lay out a DIV element, set its width and height according to the actual second kick, and use the box-shadow property of css3 to add shadow effects.
In order to add a festive atmosphere, the words 2023 are placed in the center and set in bright red. code show as below:
<!-- HTML部分 -->
<div class="ertijiao">
2<br/>
0<br/>
2<br/>
3
</div>
// css部分
* {
margin: 0;
padding: 0;
}
.ertijiao {
position: relative;
top: 74px;
margin: 100px auto;
box-shadow: -1px 56px 5px #888888;
width: 50px;
height: 180px;
text-align: center;
background-color: #c6cd97;
font-size: 30px;
color: red;
font-weight: bold;
}3. Realize the top and bottom sealing parts
The second kick is cylindrical, so in order to increase the physical effect, the top and bottom elliptical layouts are used here. The pseudo-classes of before and after are used here, and the prototype radian is set by border-radius, and then the width and height are set to form the final oval shape. code show as below:
.ertijiao:before {
position: absolute;
top: -10.5px;
z-index: 1;
height: 20px;
width: 100%;
content: '';
display: block;
border-radius: 50%;
background-color: #ceb49b;
}
.ertijiao:after {
position: absolute;
bottom: -10px;
height: 15px;
width: 100%;
border-radius: 50%;
content: '';
display: block;
background-color: #1d120e;
}4. Realization of fuse (cannon wilting)
It is relatively simple here, using a DIV element and positioning it absolutely. The key is to rotate at an angle, and here it is rotated by 30 degrees, which is more conducive to the small partners to ignite the fiery 2023. code show as below:
<!-- html部分 -->
<div class="ertijiao">
2<br/>
0<br/>
2<br/>
3
<div class="pao-nian-er"></div>
</div>
// css部分
.pao-nian-er {
position: absolute;
left: 44px;
bottom: 36px;
width: 40px;
height: 4px;
background: #616044;
transform: rotate(30deg);
box-shadow: 4px 2px 5px #000044;
}The final effect is as shown in the figure:
5. CSS writing order description
Many friends are actually not too sensitive to the writing order of css, and write wherever they think of, which is actually not appropriate. In fact, the order should be roughly like this:
△ The first thing to write is the attribute style of external positioning, for example:
position, overflow, float, etc.
top left margin-top margin-left 等
△ Then it is related to the table frame, for example:
border border-radius 等
△ Then it is related to internal padding or internal layout, for example:
width height etc.
display padding background等
△ Then it is related to internal fonts
The whole is an outside-in process
6. Complete source code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>我心爱的烟花</title>
<style>
* {
margin: 0;
padding: 0;
}
.jg {
width: 468px;
height: 462px;
background: url(./jinggai.png) no-repeat;
}
.ertijiao {
position: relative;
top: 74px;
width: 50px;
height: 180px;
margin: 100px auto;
background-color: #c6cd97;
font-size: 30px;
color: red;
font-weight: bold;
text-align: center;
box-shadow: -1px 56px 5px #888888;
}
.ertijiao:before {
position: absolute;
content: '';
display: block;
height: 20px;
width: 100%;
border-radius: 50%;
top: -10.5px;
z-index: 1;
background-color: #ceb49b;
}
.ertijiao:after {
position: absolute;
content: '';
display: block;
height: 15px;
width: 100%;
border-radius: 50%;
bottom: -10px;
background-color: #1d120e;
}
.pao-nian-er {
position: absolute;
left: 44px;
bottom: 36px;
width: 40px;
height: 4px;
background: #616044;
transform: rotate(30deg);
box-shadow: 4px 2px 5px #000044;
}
</style>
</head>
<body>
<div class="jg">
<div class="ertijiao">
2<br/>
0<br/>
2<br/>
3
<div class="pao-nian-er"></div>
</div>
</div>
</body>
7. Conclusion:
The auspicious Year of the Rabbit is finally here. 2022 is really a tough year for everyone. The epidemic, work, and little foreigners. I hope that under the igniting of this festive second kick, we will welcome 2023, ignite you, and warm me.
