【缅怀钱老先生】实现炫酷的火箭发射效果-阿里云开发者社区

前言

昨天是钱学森钱老逝世十二周年的日子，钱学森老先生对我国两弹一星事业的贡献是巨大的，借本文献上阿包无限的敬仰之情。

五年归国路，十年两弹成。

每次提起钱老先生，我脑海中都会浮现出钱老先生面对陈赓将军询问我国可不可以搞导弹时，钱老先生那干脆、慷慨有力的回应：“中国人怎么不行啊？外国人能搞的，难道中国人不能搞？中国人比他们矮一截？”。

2019 年，我刚从大学毕业，步入社会，在 10 月下旬，度过了我第一个职场中的生日。当我还沉浸在过生日的欢快中时，月底 31 号，也迎来了钱老逝世十周年的悲痛消息，从那时候起，我就想用自己的技术做点有意义的事情纪念一下钱老。

今年终于有些许空闲，我想做一个类似火箭发射、导弹发射或者人造卫星的 demo 来缅怀一下伟大的钱老先生。

但我审美水平属实有几分拉跨，一直没设计出让我满意的火箭效果，最后我只能去求助网络大佬们，终于找到一个还算满意的付费 demo ，本文记录了我学习 demo 实现火箭的过程，同时也借此表达我对航天人的敬仰。

首先来一起看一下最后的效果:

火箭绘制

整体架构

火箭部分的 html 架构如下:

<div class="rockets">
    <!-- 火箭的主体部分  -->
    <div class="rockets-body"></div>
    <!-- 火箭的窗口部分 -->
    <div class="rockets-windows"></div>
    <!-- 火箭底部 -->
    <div class="rockets-bottom"></div>
    <!-- 点火部分 -->
    <div class="fire">
</div>
复制代码

rockets-body

先来看一下主体部分的最终效果

主体部分由一个白色椭圆形、两块的灰色阴影和红色底部三部分组成。椭圆形可以使用 border-radius 轻松实现，那剩下还有三部分该如何实现？

我的第一想法就是在 rockets-body 里面在建立三个 div/span 标签，之后通过绝对定位，将三个部分分别实现。

当我具体去想代码实现时，我发生中部的阴影部分有些许难以实现，阴影部分的曲线是内凹的，border-radius 通常实现的是外凸效果；亦或者使用别的方法间接实现，实现起来都有几分难度和复杂。服从现实，看源码实现。

源码中分别使用 :before, :after 实现底部两部分，box-shadow 的 inset 实现中部阴影。(我对 inset 的概念还停留在方框里面添加内阴影，没想到可以做到这么多效果)

我们来挨着学习一下具体的实现:

rockets-body

先来看一下 css 实现

.rockets-body {
  width: 35%;
  height: 80%;
  background-color: white;
  /* 设置圆角 */
  border-bottom-left-radius: 100%;
  border-bottom-right-radius: 100%;
  border-top-left-radius: 100%;
  border-top-right-radius: 100%;
  /* flex布局 */
  display: flex;
  justify-content: center;
  /* 为 :before :after 确定定位基准 */
  position: relative;
  z-index: 1;
  box-shadow: inset 0px -173px 0px -80px white,
    inset 0px -213px 0px -60px #e4e4e4;
}
复制代码

上面 css 样式中，我们主要重点关注了 box-shadow。

日常编程中使用 box-shadow 外阴影居多，inset 的使用比较少，所以我就去查询 inset 属性。

这里阴影不涉及 h-shadow 和 blur，因此就不对这两个属性单独讲解

box-shadow: h-shadow v-shadow blur spread color inset;
h-shadow: 水平阴影的位置。允许负值
v-shadow: 垂直阴影的位置。允许负值
blur: 模糊距离
spread: 阴影的大小
inset: 从外层的阴影（开始时）改变阴影内侧阴影
复制代码

设置 inset 和 v-shadow 为负数，阴影会从底部往顶部蔓延；相反的，设置 v-shadow 为正数时，阴影从顶部往底部蔓延。具体效果如下图(按照代码顺序):

box-shadow: inset 0px 100px 0px 0px #e4e4e4;
box-shadow: inset 0px -100px 0px 0px #e4e4e4
复制代码

spread 为阴影的大小，为正数阴影会变大，负数阴影会变小。因此当设置 inset 和 v-shadow(-) 时，设置 spread(-)，阴影就会向下收缩，同理设置 inset 和 v-shadow(+) 时，阴影就会向上收缩。具体效果如下图(按照代码顺序):

box-shadow: inset 0px 100px -60px 0px #e4e4e4;
box-shadow: inset 0px -100px -60px 0px #e4e4e4
复制代码

box-shadow: 可设置多阴影，写在前面的阴影权重大，阴影重合部分权重大覆盖权重小的。为了将背景色区分开，先将第一层阴影设置为黑色，具体效果如下图(按照代码顺序):

box-shadow: inset 0px -173px 0px -80px #000;
box-shadow: inset 0px -173px 0px -80px white,
    inset 0px -213px 0px -60px #e4e4e4;
复制代码

:before

.rockets-body:before {
  content: "";
  position: absolute;
  width: calc(100% - 36px);
  height: 42%;
  background-color: inherit;
  bottom: -30px;
  transform: perspective(10em) rotateX(-50deg);
  border-bottom-left-radius: 50px;
  border-bottom-right-radius: 50px;
  box-shadow: inset 0px -33px 0px 0px rgba(0, 0, 0, 0.1);
}
复制代码

设置 border-radius 与 box-shadow ，设置后效果如下图:

rotateX: rotateX 设置负数时，图形会绕 x 轴逆时针旋转，但如果未添加 3d 效果，看起来图形就像收缩一样。

perspective: perspective 设置眼睛距离屏幕的远近，模拟人看东西的效果。值越小，距离物体越近；反之，越远。perspective 属性不看具体实例有些难以理解， perspective 核心在于看到的并不是物体本身，而是物体的投影(更详细的可以参考博客: css3系列之详解perspective)

通过调整 perspective 值为 160px，可以得到如下图形

通过调整绝对定位，将其安排在合适的位置。

:after

.rockets-body:after {
  content: "";
  position: absolute;
  width: 45%;
  height: 40px;
  background-color: #f95959;
  bottom: -20px;
  transform: perspective(10em) rotateX(-50deg);
  border-bottom-left-radius: 50px;
  border-bottom-right-radius: 50px;
  z-index: -1;
}
复制代码

:after 伪类的 css 样式原理与 :before 相同，设置 z-index: -1 ，保证重叠的部分显示为 :before

rockets-windows

绘制 windows 后效果如下:

可以看出主要有两种不同样式：圆形窗口部分和国旗部分。(国旗部分是后来添加的，热烈庆贺几天前我国航天取得的伟大新成就)

圆形窗口

.rockets-windows span {
  background-color: #ace7ef;
  box-shadow: inset -4px 4px 0px 0px rgba(0, 0, 0, 0.3),
    inset 0px 0px 0px 2px white;
  border: 4px solid #f95959;
  z-index: 2;
  position: absolute;
  border-radius: 100%;
  overflow: hidden;
}
复制代码

外层的红框通过 border 实现，内部立体效果通过 inset 实现立体效果。

红旗

.hongqi {
  width: 30px;
  height: 20px;
  background-image: url(./hongqi2.jpeg);
  position: absolute;
  background-size: cover;
  bottom: 92px;
  z-index: 1;
  box-shadow: 0px 0px 0px 1px #e4e4e4;
}
复制代码

rocket-bottom

先看一下添加 rocket-bottom 后的效果

两翼部分的实现代码类似于 body 部分的底部，都是借助 transform 的 rotateX 和 perspective 实现的。这里不做多余赘述。

/* 两翼部分 */
.rockets-bottom span:nth-child(2) {
  background-color: #4ba3b7;
  border-radius: 10px;
  position: absolute;
  overflow: hidden;
  width: 50px;
  height: 130px;
  left: 32%;
  bottom: 6%;
  transform: perspective(10em) rotateX(
60deg
) translateZ(-1px);
  box-shadow: inset -5px -3px 0px 0px rgba(0, 0, 0, 0.2)
}
/* 两翼红线装饰 */
.rockets-bottom span:before {
  content: "";
  position: absolute;
  background-color: white;
  width: 2px;
  height: 120%;
  border-radius: 20px;
}
.rockets-bottom span:nth-child(2):before {
    left: 0px;
    border-right: 2px solid #f95959;
}
复制代码

fire部分

fire 部分架构( fire 部分效果可以看前言中动图):

<div class="fire">
  <!-- 火焰 -->
  <span></span>
  <span></span>
  <span></span>
  <!-- 火光效果 -->
  <div class="glow"></div>
</div>
复制代码

span 标签实现了火焰，每个标签配合 :after 实现两根火焰。

css 部分实现:

.fire.burn span {
  border-radius: 50px;
  top: 0;
  position: absolute;
  background-color: #ffd460;
  height: inherit;
  /* 火焰动画效果 */
  animation: fire 0.8s ease infinite alternate;
}
.fire.burn span:nth-child(1) {
  width: 6px;
  height: 40px;
  left: 44%;
  transform: translateY(27px);
  /* 设置火焰 */
  box-shadow: inset 0px -7px 10px #ea5455, inset 0px -19px 10px #ffc175,
    0px -7px 10px #ea5455;
  animation-delay: 0.2s;
}
.fire.burn span:nth-child(1):after {
  position: absolute;
  content: "";
  width: 4px;
  height: 60%;
  border-radius: 50px;
  background-color: #ffd460;
  bottom: 0;
  transform: translate(8px, 15px);
  /* 第二根火焰 */
  box-shadow: inset 0px -5px 10px #ea5455, inset 0px -19px 10px #ffc175,
    0px -7px 10px #ea5455;
}
复制代码

火箭发射JS部分

绘制火箭完毕后，就可以进行火箭点火、发射的行为。火箭发射的行为并没有借助 animate.js 等运动框架，主要使用 CSS3 提供的 animation 动画配合类名切换实现。

例如下面我们可以看一下火箭发射效果实现:

火箭发射效果

预先写好发射动画与发射相关类名:

/* 火箭发射样式 */
.rockets.launch {
  bottom: 120%;
  animation: launch 3s ease;
}
@keyframes launch {
  0% {
    bottom: 130px;
    transform: translatex(2px);
  }
  10% {
    transform: translatex(-2px);
  }
  20% {
    transform: translatex(2px);
  }
  30% {
    transform: translatex(-2px);
  }
  60% {
    transform: translatex(0px);
    bottom: 150px;
  }
  100% {
    bottom: 120%;
  }
}
复制代码

当点击火箭发射按钮时，给火箭添加 launch 类名

document.querySelector(".rockets").classList.add("launch")
复制代码

源码地址

传送门: rocket-lanuch

总结

火箭发射的 js 部分并不难理解，都是通过 css animation 配合类名切换进行实现，其余部分也是类似实现，因此阿包就没有用过多的篇幅来重复讲述(完整源码)。

css 的部分真的让我学到了很多:

perspective 使用
box-shadow inset使用
box-shadow: 多阴影的使用
:before, :after 使用
animation 配合类名切换实现动态效果

这次火箭发射的 demo 书写还是挺失败的，其实最初我的脑海中涌现出了很多立体的、宏大的场景，但大多都因为技术水平不够或者设计水平不够被放弃，内心真的是非常遗憾。希望我能努力的学习，完善知识结构，下一次可以做一个让自己满意的火箭发射。

如果大家有好的火箭发射创意或者导弹发射创意等，咱们可以一起学习、交流、实现，一起来纪念缅怀我国的伟大两弹一星元勋们。

效果实现的也许并不好，但阿包肯定会越做越好的。致敬两弹一星功勋元老，致敬中国航天!

【缅怀钱老先生】实现炫酷的火箭发射效果

前言

火箭绘制

整体架构

rockets-body

rockets-body

:before

:after

rockets-windows

圆形窗口

红旗

rocket-bottom

fire部分

火箭发射JS部分

火箭发射效果

源码地址

总结

往期精彩文章

热门文章

最新文章

相关电子书

相关实验场景

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

【缅怀钱老先生】实现炫酷的火箭发射效果

前言

火箭绘制

整体架构

rockets-body

rockets-body

:before

:after

rockets-windows

圆形窗口

红旗

rocket-bottom

fire部分

火箭发射JS部分

火箭发射效果

源码地址

总结

往期精彩文章

热门文章

最新文章

相关电子书

相关实验场景