我正在参加中秋创意投稿大赛，详情请看：中秋创意投稿大赛
海上生明月，天涯共此时
前言
一年一度的中秋悄然而至，提前祝掘友们中秋节快乐，祝大家开心甜蜜与爱人团圆，幸福美满和家人相聚，好运相随“圆圆”不断 🚀🚀🚀
布局
为了适配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)
};
}
效果如下：
体验网址
结束
推荐一本《CSS3艺术》专治花里胡哨，文中一些设计思想来源此书
最好祝大家中秋节快乐，好运连连！
