我正在参加「创意开发 投稿大赛」详情请看：掘金创意开发大赛来了！

前言

我从小生活在农村，所以每到夏天，满是星光的夜空总是给我一种安静舒适的感觉，自己也从小梦想有一天自己也能飞出地球，飞向外太空，但是这个梦想太过遥远，有可能终生也实现不了，于是萌生了用代码的方式自己“创造”一个属于自己的火箭，飞向外太空。

一.最终效果

二.实现思路

1.构思火箭

思路:

在此之前想用最原始的CSS来绘制火箭主体，后面发现太过麻烦，绘制出来的火箭太难看了，比例不是很协调，所以后面就采用了<svg>标签，再配合<path>标签一起使用，可以很规范的绘制出一个不太难看的火箭。

代码:

<path id="Right_Fin" data-name="Right Fin" d="M1328.2,674.1s78.2,0,78.2,31.3S1422,846,1422,846s-46.9-156.3-93.8-125S1312.6,689.7,1328.2,674.1Z" transform="translate(-1170.5 -450)" fill="#314d51"/>

2.火箭升空后的效果

(1)尾部火焰

思路：

火箭升空后，尾部有火焰喷出，火焰一般为橘红色，这里为了好看设置成红，橘红，金红和白色的分层次的，而且必须是动态的火焰，这样 才有真实感，还就是要有那种类似抖动的效果，这里采用的是animation属性去实现抖动的效果

代码:

<div class="thruster">
  <div class="flame-wrapper">
    <div class="flame red"></div>
    <div class="flame orange"></div>
    <div class="flame gold"></div>
    <div class="flame white"></div>
  </div>
</div>

.thruster {
    position: relative;
    z-index: -5;
    display: flex;
    justify-content: center;
    align-items: center;
    transform: translatex(-11%);
    opacity: 0;
    animation: 500ms fadein 1s forwards;
}

(2)背景色切换

思路：

火箭从地球地面发射所以，开始的颜色为蓝色，接着就是进入大气层(白色)，后面就是进入太空(黑色)，这里采用CSS里radial-gradient函数实现

代码:

#sky {
    position: absolute;
    bottom: -100vh;
    left: -50vw;
    z-index: -20;
    background: radial-gradient(circle at center, #0784c2,var(--main-bg-color) 50%);
    border-radius: 50%;
    height: 300vh;
    width: 200vw;
    animation: 8s earthLeave 5s forwards;
}

三.遇到的问题和未实现的功能点

遇到的问题:

之前没有注意，火箭会跑出边框，要保证火箭不会跑出画布边界，使用animation属性注意时长，而且如果是叠加了其他动画要注意控制状态

未实现的功能点：

火箭升空倒计时，鼠标点击发射，给一段代码，输入正确结果才发射，或者在json文件里放一个代码题库，答对一题飞多少米这些模式

后语

航天梦对于普通人虽然遥不可及，但是我坚信，会有那么一天，待我们的科技力量足够强大，我们每个人都能在月球上瞭望地球。