阅读 1461

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

我正在参加中秋创意投稿大赛,详情请看:中秋创意投稿大赛

海上生明月,天涯共此时

前言

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

布局

为了适配PC端和移动端,布局单位全部使用rem来实现整体缩放,通过js获取设备宽度动态设置页面中htmlfont-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;
}
复制代码

效果如下:

_Users_hanyueqiang_Desktop_projects_2021_0907_index.html (1).png

火箭轨道

火箭轨道是一个围绕月亮的圆,利用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;
}
复制代码

效果如下:

_Users_hanyueqiang_Desktop_projects_2021_0907_index.html (2).png

制作火箭

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

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

效果如下:

_Users_hanyueqiang_Desktop_projects_2021_0907_index.html (3).png

驾驶舱

一个长方形,用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;
}
复制代码

效果如下:

_Users_hanyueqiang_Desktop_projects_2021_0907_index.html (4).png

引擎

引擎由喷气管和火焰组成,用伪元素制作火焰,其中一个细节是引擎要在驾驶舱下层,要给驾驶舱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;
}
复制代码

效果如下:

_Users_hanyueqiang_Desktop_projects_2021_0907_index.html (5).png

两翼

用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;
}
复制代码

效果如下:

_Users_hanyueqiang_Desktop_projects_2021_0907_index.html (6).png

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

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

效果如下:

_Users_hanyueqiang_Desktop_projects_2021_0907_index.html (7).png

火箭绕月飞行

给火箭运行轨道添加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)
  };
}
复制代码

效果如下:

Sep-09-2021 22-47-39.gif

体验网址

www.webyueqiang.com

结束

推荐一本《CSS3艺术》专治花里胡哨,文中一些设计思想来源此书

最好祝大家中秋节快乐,好运连连!

文章分类
前端