中秋节快乐，使用CSS3实现小火箭绕月飞行

海上生明月，天涯共此时

前言

一年一度的中秋悄然而至，提前祝掘友们中秋节快乐，祝大家开心甜蜜与爱人团圆，幸福美满和家人相聚，好运相随“圆圆”不断 🚀🚀🚀

布局

为了适配PC端和移动端，布局单位全部使用rem来实现整体缩放，通过js获取设备宽度动态设置页面中html的font-size大小

整体布局：

<body>
  <div class="container">
    <div class="moon"></div>
    <div class="orbit">
      <div class="rocket-box">
        <div class="rocket">
          <span class="cockpit"></span>
          <span class="engine"></span>
          <span class="flanks"></span>
        </div>
      </div>
    </div>
  </div>
</body>

container: 设置容器大小，相对定位，容器内部元素水平、垂直居中
moon: 月亮
orbit: 火箭运行轨道,制作拖影效果
rocket-box: 火箭容器，用于调整火箭在轨道上位置和飞行姿态
rocket: 火箭大小
cockpit：火箭驾驶舱、舷窗
engine：火箭引擎、喷火处
flanks: 火箭两翼

月亮

设置container宽高，子元素垂直水平居中

设置月亮宽高，用box-shadow给月亮添加光晕

.container {
  margin: .24rem auto;
  width: 4.5rem;
  height: 4.5rem;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.moon {
  width: 1.4rem;
  height: 1.4rem;
  background-color: yellow;
  border-radius: 50%;
  box-shadow: 0 0 .3rem white;
}

效果如下：

火箭轨道

火箭轨道是一个围绕月亮的圆，利用border属性绘制出拖影效果

.orbit {
  position: absolute;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  border-width: 0.01rem;
  border-style: solid solid none none;
  border-color: silver transparent transparent transparent;
}

效果如下：

制作火箭

设置火箭宽高，并把火箭定位到火箭拖影的开始位置

.rocket-box {
  position: absolute;
  top: 0.35rem;
  right: -.12rem;
}
.rocket {
  width: .55rem;
  height: .6rem;
  position: relative;
  border: 1px dashed #fff; // 临时加辅助线，确定火箭位置
}

效果如下：

驾驶舱

一个长方形，用border-radius使上方成弧形，利用伪元素画出舷窗

.cockpit {
  position: absolute;
  width: .35rem;
  height: .5rem;
  background: linear-gradient(whitesmoke, darkgray);
  border-radius: 50% / 70% 70% 5% 5%;
  left: .1rem;
}
.cockpit::before {
  content: '';
  position: absolute;
  box-sizing: border-box;
  width: .16rem;
  height: .16rem;
  background-color: deepskyblue;
  border-radius: 50%;
  border: 0.02rem solid lightslategray;
  top: .13rem;
  left: .11rem;
  box-shadow: inset -0.01rem 0.01rem white;
}

效果如下：

引擎

引擎由喷气管和火焰组成，用伪元素制作火焰，其中一个细节是引擎要在驾驶舱下层，要给驾驶舱cockpit添加z-index: 1,火焰在喷气管下层，z-index设为-1

.cockpit {
   ...
   z-index: 1;
}
.engine {
  position: absolute;
  width: .2rem;
  height: .15rem;
  background-color: #444;
  border-radius: 20%;
  top: .4rem;
  eft: .17rem;
}
.engine::before {
  content: '';
  position: absolute;
  box-sizing: border-box;
  width: .14rem;
  height: .14rem;
  background: gold;
  border-radius: 80% 0 50% 45% /50% 0 80% 45%;
  transform: rotate(135deg);
  border: 0.01rem solid orange;
  left: 0.03rem;
  top: .1rem;
  z-index: -1;
}

效果如下：

两翼

用before、after伪元素完成两翼对称制作，用border-radius设置两翼形状,定位到驾驶舱两侧

.flanks::before,
.flanks::after {
  content: '';
  position: absolute;
  width: .08rem;
  height: .3rem;
  background: linear-gradient(tomato,darkred);
  top: .3rem;
}
.flanks::before {
  border-radius: .1rem 0 50% 100%;
  left: .02rem;
}
.flanks::after {
  border-radius: 0 .1rem 100% 50%;
  right: 0.04rem;
}

效果如下：

去掉辅助线，调整火箭飞行姿态

.rocket-box {
  position: absolute;
  top: 0.38rem;
  right: 0;
  transform: rotate(145deg);
}

效果如下：

火箭绕月飞行

给火箭运行轨道添加animation，嫦娥一号绕月一圈飞行时间为127分钟，该动画设为12.7s一圈、以linear方式进行循环(infinite)播放

1turn = 360deg

.orbit {
  position: absolute;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  border-width: 0.01rem;
  border-style: solid solid none none;
  border-color: silver transparent transparent transparent;
  animation: spinning linear infinite;
  animation-duration: 12.7s;
}
@keyframes spinning {
  to {
    transform: rotate(1turn)
  };
}