I am participating in the Mid-Autumn Festival Creative Submission contest, please see: Mid-Autumn Festival Creative Submission Contest for details
The Mid-Autumn Festival is coming, I wish everyone a happy Mid-Autumn Festival! Just yesterday, Our shenzhou xii manned spacecraft went home smoothly. It also coincides with the Mid-Autumn Festival, which is really a day worth celebrating. I had a brainwave, just want to open the rocket to send sister Chang ‘e home, ha ha ~
Let’s start with the humble pieces.
Now, how do we do that
A, elements,
<body>
<div class="moon"></div>
<div class="rocket">
<div class="left"></div>
<div class="main"></div>
<div class="right"></div>
<div class="bottom"></div>
</div>
<img src=".. /vue/change.png" class="img1">
<img src=".. /vue/change.png" class="img2">
</body>
Copy the code- The moon — > moon
- The rockets – > rocket
- Rocket cabin –>main
- Rocket wing –>left, right
- Rocket engine –> Bottom
- Chang ‘e –> IMG1, IMG2
My idea: The composition elements are very simple. The main CSS rocket painting is still difficult and fun, I did not expect to be able to play like this. Then draw a moon and add animation as a whole, but pay attention to the connection time of animation, otherwise it will not feel smooth.
Second, rocket realization
Before you draw a rocket, make sure you know what the rocket looks like, what the structure is, and start laying it out.
Because I’m so lame, I just want to draw the simplest one. This is the simplest rocket structure I had in mind at first. Other small structures, such as rocket cabins and flames, can be implemented using pseudo-elements. Div saves what it can. There is also a problem is the color, rocket color if more monotonous is not very good, so gradient, or what color you like to tune. This is a headache. (I won’t tell you I read it in comics)
CSS code
.rocket{
position: absolute;
bottom: 0%;
left: 74%;
width: 100px;
height: 200px;
}
/ * * / from the cockpit
.main{
position: absolute;
width: 50px;
height: 100px;
left: 20%;
top: 5%;
background: linear-gradient(whitesmoke, darkgray);
border-radius: 50% / 70% 70% 5% 5%;
border:.5px solid black;
z-index: 1;
}
/* Use false elements to draw rocket Windows */
.main::before{
content: ' ';
position: absolute;
box-sizing: border-box;
width: 30px;
height: 30px;
background-color: deepskyblue;
border-radius: 50%;
border: 1px solid lightslategray;
top: 17%;
left: 20%;
box-shadow: inset -0.01 rem 0.01 rem white;
}
.left{
position: absolute;
width: 10px;
height: 20px;
top: 45%;
left: 10%;
background: #ec2825;
border-radius: 12px 0 50% 100%;
}
.right{
position: absolute;
width: 10px;
height: 20px;
top: 45%;
left: 71%;
border-radius: 0 12px 100% 50%;
background: #ec2825;
}
/ * * / engine
.bottom{
position: absolute;
width: 30px;
height: 10px;
top: 54%;
left: 30%;
border: 1px solid black;
background-color: #8a6b6a;
border-radius: 20%;
}
/* Add flame with false element */
.bottom::before{
content: "";
position: absolute;
top: 80%;
left: 10%;
width: 25px;
height: 30px;
border-radius: 0 0 100% 100%;
background-image: linear-gradient(to bottom,rgb(255.255.0), transparent 70%);
z-index: -2;
}
Copy the codeWe’re out of here after we’ve spent our rocket. There are comments in the code section.
Three, the moon realization
The moon is very simple, mainly the choice of color, I choose here is silver white light. Because it’s night. It’s fitting for my background.
CSS code
/ * * / the moon
.moon{
position: absolute;
top:10%;
right:15%;
width:100px;
height:100px;
border-radius:50%;
background:white;
opacity:0.9;
box-shadow: 0px 0px 40px 15px white;
}
Copy the codeAfter the moon is realized, you need to give your body a background oh, it can’t be white, otherwise it won’t be visible. You can’t see it on a white background.
Four, animation implementation
The implementation of animation is also important. Here I mainly add chang ‘e fly to the rocket, the rocket fly to the moon, Chang ‘e get off the rocket, rocket fire animation. The first three animations have a sequential relationship, rocket fire breathing animation needs to continue all the time. There is also the time difference between the animation, which needs to be adjusted slowly, and the speed of each frame will affect the smoothness and experience.
Chang e’s picture is I casually to the net to find (king rumeng make skin) screenshots down. I really don’t want to find a map, but I can’t draw it.
Flame spray fire
All animation code including the previous. CSS code
<style>
* {
padding: 0;
margin: 0;
}
html.body {
width: 100vw;
height: 100vh;
}
body{
background:url(https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fb3-q.mafengwo.net%2Fs9%2FM00%2FF7%2F2B%2FwKgBs1d2kdWAafk6ABSBh-QX0 Sk25.jpeg%3FimageView2%2F2%2Fw%2F680%2Fq%2F90&refer=http%3A%2F%2Fb3-q.mafengwo.net & app = 2002 & size = f9999, 10000 & q = a80 & g & n = 0 =0n&fmt=jpeg?sec=1634542316&t=71a8d576439e8bd85873201a45f8c1a8);
background-size: cover;
}
/ * * / rocket
.rocket{
position: absolute;
bottom: 0%;
left: 74%;
width: 100px;
height: 200px;
animation:rocket 8s;
-webkit-animation:rocket 8s;
animation-fill-mode: forwards;
animation-delay: 6s;
}
@keyframes rocket{
0% {bottom: 10%; }80%{bottom: 70%; }100% {bottom: 100%;}
}
/ * * / the moon
.moon{
position: absolute;
top:10%;
right:15%;
width:100px;
height:100px;
border-radius:50%;
background:white;
opacity:0.9;
box-shadow: 0px 0px 40px 15px white;
}
/ * * / from the cockpit
.main{
position: absolute;
width: 50px;
height: 100px;
left: 20%;
top: 5%;
background: linear-gradient(whitesmoke, darkgray);
border-radius: 50% / 70% 70% 5% 5%;
border:.5px solid black;
z-index: 1;
}
/* Use false elements to draw rocket Windows */
.main::before{
content: ' ';
position: absolute;
box-sizing: border-box;
width: 30px;
height: 30px;
background-color: deepskyblue;
border-radius: 50%;
border: 1px solid lightslategray;
top: 17%;
left: 20%;
box-shadow: inset -0.01 rem 0.01 rem white;
}
.left{
position: absolute;
width: 10px;
height: 20px;
top: 45%;
left: 10%;
background: #ec2825;
border-radius: 12px 0 50% 100%;
}
.right{
position: absolute;
width: 10px;
height: 20px;
top: 45%;
left: 71%;
border-radius: 0 12px 100% 50%;
background: #ec2825;
}
/ * * / engine
.bottom{
position: absolute;
width: 30px;
height: 10px;
top: 54%;
left: 30%;
border: 1px solid black;
background-color: #8a6b6a;
border-radius: 20%;
}
/* Add flame with false element */
.bottom::before{
content: "";
position: absolute;
top: 80%;
left: 10%;
width: 25px;
height: 30px;
border-radius: 0 0 100% 100%;
background-image: linear-gradient(to bottom,rgb(255.255.0), transparent 70%);
z-index: -2;
transform-origin: 50% 0;
animation: fire 0.1 s linear alternate infinite;
}
/* Add an animation to the flame */
@keyframes fire {
to {
transform: scaleX(0.98) translateY(-1vmin); }}.img1{
width: 50px;
height: 50px;
border-radius: 50%;
position: absolute;
left: 10%;
bottom: 5%;
animation:changer 5s;
-webkit-animation:changer 5s;
animation-fill-mode: forwards;
}
@keyframes changer{
0% {left: 15%; }99% {left: 75%;bottom: 20%;z-index: 1;width: 25px;height: 25px; }100% {left: 75%;bottom: 20%;visibility: hidden;width: 25px;height: 25px;}
}
.img2{
width: 25px;
height: 25px;
border-radius: 50%;
position: absolute;
visibility: hidden;
right: 20%;
top: 13%;
animation:changer2 3s;
-webkit-animation:changer2 3s;
animation-fill-mode: forwards;
animation-delay: 11s;
}
@keyframes changer2{
0% {right: 20%;visibility: inherit; }50% {right:18%;width: 30px;height: 40px;visibility: inherit; }100% {right:17%;width: 50px;height: 50px;visibility: inherit; } } </style>Copy the codesummary
CSS animation is the key content, animation is widely used. I went over the CSS again while writing this. The front end is too difficult.
Welcome to communicate with each other.
Finally, everyone a happy Mid-Autumn Festival!
You’re at the end, so give it a thumbs up.
