我用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，前端太难了。

欢迎各位大佬互相交流。

最后最大家中秋快乐！

都看到最后了，就来点个赞吧。