代码上太空

·  阅读 815
代码上太空

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

前言

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

一.最终效果

二.实现思路

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文件里放一个代码题库,答对一题飞多少米这些模式

后语

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

分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改