我用CSS画了个火箭送嫦娥妹妹回家
Posted Mq_sir
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了我用CSS画了个火箭送嫦娥妹妹回家相关的知识，希望对你有一定的参考价值。
我用CSS画了个火箭送嫦娥妹妹回家
就在8月17号我国神州十二号载人飞船顺利回家。又恰逢中秋佳节，真是值得庆祝的一天。我这灵机一动，就想着开火箭送嫦娥妹妹回家，哈哈~
先来看看成品。
接下来看看怎么实现
一、元素
<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>
- 月亮 -->moon
- 火箭 -->rocket
- 火箭机舱 -->main
- 火箭侧翼 -->left、right
- 火箭引擎 -->bottom
- 嫦娥 -->img1、img2
我的思路：构图元素非常简单。主要css画火箭还是又难又好玩，没想到还能这样玩。再是画一个月亮，再整体添加动画，不过要注意动画的衔接时间，不然会感觉不顺畅。
二、火箭实现
在画火箭之前，肯定要知道火箭长啥样，啥结构，然后开始布局。
由于我太菜了，就想着画一个最简单的就行了。这是我一开始想的最简单的火箭结构。其余的小结构，比如火箭的机舱，火焰，可以使用伪元素去实现。div能省则省。还有一个问题就是配色，火箭颜色如果比较单调就不是很好看，所以渐变色，或者自己喜欢什么颜色来调。这个好头疼。
（不会告诉你们我是看漫画看到的）
在这里插入图片描述
css代码
.rocket{
position: absolute;
bottom: 0%;
left: 74%;
width: 100px;
height: 200px;
}
/* 机舱 */
.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;
}
/* 使用伪元素画出火箭的窗户 */
.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.01rem 0.01rem 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;
}
/* 引擎 */
.bottom{
position: absolute;
width: 30px;
height: 10px;
top: 54%;
left: 30%;
border: 1px solid black;
background-color: #8a6b6a;
border-radius: 20%;
}
/* 使用伪元素添加火焰 */
.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;
}
这一步花完我们的火箭就出来了。代码部分有注释。
三、月亮实现
月亮就很简单了，主要还是颜色的选择，我这里选的是银白光。因为在夜晚嘛。配合我的背景还是很应景的。
css代码
/* 月亮 */
.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;
}
月亮实现完是这样的，要给你的body配上背景噢，不能是白色，不然就看不见了。如果是白色的背景也看不见。
四、动画实现
动画的实现也是重点。我在这里主要就添加了嫦娥飞向火箭、火箭飞向月亮、嫦娥从火箭下车、火箭的喷火动画。前面三个动画有先后的关系，火箭喷火的动画是需要一直持续的。还有就是动画的衔接时间差这要去慢慢调，以及每一帧的快慢都会影响到流畅、体验感。
嫦娥的图片是我随便到网上找了（王者如梦令皮肤）截图下来。实在不想去找图了，自己华更是画不出来。
火焰喷火
所有动画代码包括前面的。
css代码
<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-QX0Sk25.jpeg%3FimageView2%2F2%2Fw%2F680%2Fq%2F90&refer=http%3A%2F%2Fb3-q.mafengwo.net&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1634542316&t=71a8d576439e8bd85873201a45f8c1a8);
background-size: cover;
}
/* 火箭 */
.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%;}
}
/* 月亮 */
.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;
}
/* 机舱 */
.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;
}
/* 使用伪元素画出火箭的窗户 */
.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.01rem 0.01rem 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;
}
/* 引擎 */
.bottom{
position: absolute;
width: 30px;
height: 10px;
top: 54%;
left: 30%;
border: 1px solid black;
background-color: #8a6b6a;
border-radius: 20%;
}
/* 使用伪元素添加火焰 */
.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.1s linear alternate infinite;
}
/* 给火焰添加一个动画 */
@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>
小结
css动画是重点内容，动画的应用很广泛。
自己在写这个的时候又重新复习了下css，前端太难了。
欢迎各位大佬互相交流。
最后最大家中秋快乐！
都看到最后了，就来点个赞吧。
以上是关于我用CSS画了个火箭送嫦娥妹妹回家的主要内容，如果未能解决你的问题，请参考以下文章