我正在参加中秋创意投稿大赛，详情请看：中秋创意投稿大赛
举杯邀明月，对影成三人。————李白《月下独酌》
每到中秋佳节的时刻，正是背井离乡的故人想家的时候，有的人因工作问题、有的因身体问题、有的人因现实问题等都无法回家探望亲人，此时此刻他们是无比的想念家乡、想念家人。
而置身在天空上的中国航天员们也不一例外，中秋佳节也是他们最思念家乡的时刻，但是因为身上肩负着国家委托给他们的任务无比重要，无法回到家里陪家人过中秋，但是我们相信他们能顺利完成任务，顺利的返航国家。
家里人期盼着他们、人民期盼着他们、国家期盼着他们顺利归来，就好比李白所说的：举杯邀明月，对影成三人
作为一名前端切图仔，我用我的方式致敬他们。希望大家能看下去
登月特效
先给大家看看动画效果（火箭登月效果）
这个实现起来也很简单，看看步骤。（每个步骤都是有一个小故事）
- 第一步：实现夜空星星与月亮
昏暗的夜空下，中国太空站化成星星点缀了太空，月亮照亮了地球，我们与中国航天员共处同个月亮。
// html
<div class="space">
// 月亮
<div class="moon">
<div class="explosion"></div>
</div>
// 背景上的星星
<ul class="stars">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
// css
body {
animation: blur 8s infinite linear;
background: #453454;
}
.space {
background: linear-gradient(to bottom, darken(#453454, 15%) 0, lighten(#453454, 5%));
height: 100vh;
position: absolute;
overflow: hidden;
top: 0;
width: 100vw;
}
.moon {
background-color: #aba7a1;
background-image:
radial-gradient(circle, darken(#aba7a1, 5%) 50%, transparent 51%),
radial-gradient(circle, darken(#aba7a1, 8%) 50%, transparent 54%);
background-repeat: no-repeat;
background-size: 28vmin 28vmin, 10vmin 10vmin;
background-position: 150% 140%, 20%, 80%;
border-radius: 50%;
box-shadow: 0 0 20px 0 lighten(#aba7a1, 10%);
height: 40vmin;
right: -5vh;
position: absolute;
top: -10vw;
width: 40vmin;
}
.stars {
list-style: none;
margin: 0;
li {
animation: stars 14s infinite;
background: #dfe8f8;
border-radius: 50%;
height: 3px;
position: absolute;
width: 3px;
&:nth-of-type(1) {
animation-delay: 3s;
top: 5vw;
left: 30vw;
}
&:nth-of-type(2) {
animation-delay: 13s;
top: 15vw;
left: 10vw;
}
&:nth-of-type(3) {
animation-delay: 7s;
top: 20vw;
left: 12vw;
}
&:nth-of-type(4) {
animation-delay: 5s;
top: 27vw;
left: 75vw;
}
&:nth-of-type(5) {
animation-delay: 12s;
top: 12vw;
left: 60vw;
}
&:nth-of-type(6) {
animation-delay: 7.5s;
top: 17vw;
left: 40vw;
}
&:nth-of-type(7) {
animation-delay: 1s;
top: 35vw;
left: 85vw;
}
&:nth-of-type(8) {
animation-delay: 9s;
top: 22vw;
left: 67vw;
}
}
}
.explosion {
animation: explosion 8s infinite ease-in-out;
background: orange;
border-radius: 50%;
box-shadow: none;// 0 0 10vmin 20vmin red;
top: 25%;
height: 10px;
width: 10px;
right: 25%;
position: absolute;
}
看看效果图
- 第二步，实现山景、树林
山林相伴，如果中国的自然环境越来越好，离不开每一位国人的努力，也希望继续下去。
// html
<div class="mountain m1"></div>
<div class="mountain m7"></div>
<div class="mountain m2"></div>
<div class="mountain m4"></div>
<div class="mountain m3"></div>
<div class="mountain m3"></div>
<div class="mountain m5"></div>
<ul class="forest">
<li class="tree"></li>
<li class="tree"></li>
<li class="tree"></li>
<li class="tree"></li>
</ul>
// css
.mountain {
background-image:
radial-gradient(circle, lightgray 50%, transparent 51%),
radial-gradient(ellipse, lightgray 50%, transparent 51%),
radial-gradient(ellipse, lightgray 50%, transparent 51%);
background-size: 60% 80%, 50% 70%, 50% 70%;
background-repeat: no-repeat;
bottom: 0;
position: absolute;
&.m1 {
background-color: saturate(#453d2a, 20%);
background-position: -80% -120%, 0% -150%, -4vmax -4vmax;
bottom: -10vh;
filter: blur(3px);
height: 70vmin;
left: -15vw;
transform: rotate(60deg) skewX(20deg);
width: 40vmin;
}
&.m7 {
background-color: saturate(#453d2a, 40%);
background-position: 40vmax 40vmax, -25% -130%, 40vmax 40vmax;
bottom: -20vh;
filter: blur(3px);
height: 70vmin;
left: 12vw;
transform: rotate(60deg) skewX(20deg);
width: 40vmin;
}
&.m3 {
background-color: lighten(#453d2a, 5%);
background-image: none;
border-radius: 50% 50% 0 0 / 100% 100% 0 0;
filter: blur(2px);
height: 35vmin;
left: 15vw;
width: 50vmin;
& + .m3 {
left: -5vw;
}
}
&.m4 {
background-color: darken(#453d2a, 10%);
background-position: center -120%, left -100%, right -80%;
border-radius: 50% 50% 0 0 / 100% 100% 0 0;
filter: blur(2px);
height: 60vmin;
left: 35vw;
width: 35vmin;
}
&.m5 {
background-color: #453d2a;
background-position: center -120%, left -100%, right -80%;
border-radius: 50% 50% 0 0 / 100% 100% 0 0;
filter: blur(1px);
height: 50vmin;
left: 7vw;
width: 40vmin;
}
}
/* Create the different trees */
.tree {
border-color: transparent transparent darkgreen transparent;
border-style: solid;
/* Border radius for a rounder bottom */
border-radius: 15%;
box-sizing: border-box;
display: block;
position: absolute;
/* The log */
&::after {
background: #704e35;
content: '';
display: block;
position: absolute;
height: 70px;
left: -8px;
width: 16px;
}
/* The individual trees */
&:nth-of-type(1) {
bottom: 30px;
border-color: transparent transparent darken(darkgreen, 10%) transparent;
border-width: 0 50px 320px 50px;
filter: blur(2px);
right: 10vw;
&::after {
bottom: -390px;
}
}
&:nth-of-type(2) {
bottom: 40px;
border-color: transparent transparent darken(darkgreen, 5%) transparent;
border-width: 0 50px 250px 50px;
filter: blur(1px);
right: 18vw;
&::after {
bottom: -320px;
}
}
&:nth-of-type(3) {
bottom: 35px;
border-width: 0 60px 350px 60px;
filter: blur(1px);
right: 4vw;
&::after {
bottom: -420px;
}
}
&:nth-of-type(4) {
bottom: 70px;
border-color: darkgreen;
border-width: 60px;
border-radius: 50% / 60% 60% 40% 40%;
filter: blur(1px);
right: 24vw;
&::after {
bottom: -130px;
}
}
}
看看效果图
- 第三步，实现火箭发射架台与火箭
从1956年到2021年，从钱学森到如今的航天科学家，中国科学家一步一个脚印，用一生的心血研究出火箭，打造出属于中国人的太空，我们为你们感到骄傲....
<div class="tower">
<div class="arm">
</div>
</div>
<div class="rocket">
<div class="tail"></div>
<ul class="flames">
<li></li>
<li></li>
</ul>
</div>
.rocket {
animation: flight 8s infinite;
background-color: red;
/* background-image is used for the striping, nose tip and shadow effect */
background-image: linear-gradient(90deg, rgba(33,33,33,.10) 50%, transparent 50%), radial-gradient(circle, gray 30%, white 32%, white 80%, red 82%, white 84%, red 86%);
background-repeat: no-repeat;
background-position: 0 0, 0 -110px;
backgrund-size: 200%;
border-radius: 50% 50% 20% 20%/ 40% 40% 60% 60%;
bottom: 40px;
height: 200px;
left: 150px;
position: absolute;
width: 80px;
}
.tail {
background: gray;
top: 200px;
height: 35px;
left: 37px;
position: relative;
width: 6px;
/* Here the 2 side tails are created */
/* The second one is a 180 deg flipped version */
&::before,
&::after {
background-repeat: no-repeat;
background-size: 200% 200%;
background-position: 0px -0px;
border-radius: 100% 20% 0 10% / 60% 100% 0 40%;
content: '';
display: block;
height: 80px;
position: absolute;
top: -40px;
width: 35px;
}
&::before{
/* Used the transparency in the radial gradient to create the 'inner-circle' */
/* The outer is done with border-radius */
background-image: radial-gradient(ellipse, transparent 40%, gray 42%);
box-shadow: -2px -2px 0 0 darken(gray, 10%);
left: -55px;
}
&::after {
background-image: radial-gradient(ellipse, transparent 40%, darken(gray, 5%) 42%);
box-shadow: -2px -2px 0 0 lighten(gray, 5%);
right: -55px;
transform: rotateY(180deg);
}
}
.flames {
animation: flames 8s infinite;
list-style: none;
margin: 0;
opacity: .3;
position: relative;
top: 165px;
transform-origin: top center;
transform: scale(.3);
li {
animation: fire .4s infinite ease-in-out;
background: yellow;
border-radius: 50% 50% 60% 60%/ 18px 18px 100% 100%;
bottom: -63px;
box-shadow: 0 15px 20px -2px yellow;
height: 60px;
left: 22px;
opacity: .7;
position: absolute;
transform-origin: top center;
width: 36px;
&:nth-of-type(2) {
animation-delay: .3s;
animation-duration: .8s;
background: orangered;
bottom: -46px;
box-shadow: 0 15px 20px -2px orangered;
height: 40px;
left: 30px;
width: 20px;
}
}
}
.tower,
.arm {
border-color: gray;
border-style: solid;
position: absolute;
}
.tower {
animation: tower 8s infinite ease-in-out;
background-image:
linear-gradient(-45deg, transparent 29px, gray 31px, lighten(gray, 5%) 31px, lighten(gray, 5%) 33px, transparent 33px),
linear-gradient(45deg, transparent 29px, gray 29px, gray 31px, darken(gray, 5%) 31px, darken(gray, 5%) 33px, transparent 33px);
background-size: 44px 44px;
border-width: 5px 5px 0;
bottom: 0;
height: 300px;
left: 56px;
transform-origin: left bottom;
width: 44px;
}
.arm {
animation: arm 8s infinite ease-in-out;
background-image:
linear-gradient(-45deg, transparent 16px, gray 16px, gray 18px, transparent 18px),
linear-gradient(45deg, transparent 16px, gray 16px, gray 18px, transparent 18px);
background-size: 24px 24px;
border-width: 5px;
height: 24px;
left: 44px;
top: 90px;
width: 60px;
}
看看效果
- 最后一步，加上升空动画
// css
@keyframes fire {
0% {
opacity: .6;
transform: scale(.96) rotate(-3deg);
}
10% {
opacity: .8;
transform: scale(1.01) rotate(-2deg);
}
20% {
opacity: .5;
transform: scale(.96) rotate(-1deg);
}
30% {
opacity: .7;
transform: scale(1.01) rotate(0);
}
40% {
opacity: .6;
transform: scale(.96) rotate(1deg);
}
50% {
opacity: .8;
transform: scale(1.01) rotate(2deg);
}
60% {
opacity: .5;
transform: scale(.96) rotate(1deg);
}
70% {
opacity: .7;
transform: scale(1.01) rotate(0);
}
80% {
opacity: .45;
transform: scale(.96) rotate(-1deg);
}
90% {
opacity: .6;
transform: scale(1.01) rotate(-2deg);
}
}
@keyframes flames {
0% {
opacity: .3;
transform: scale(.3);
}
7% {
opacity: .3;
transform: scale(.3);
}
10% {
opacity: .7;
transform: scale(1.2);
}
15% {
opacity: 1;
transform: scale(.8);
}
40% {
opacity: .9;
transform: scale(.8);
}
50% {
opacity: .9;
transform: scale(1.2);
}
100% {
opacity: 1;
transform: scale(1);
}
}
@keyframes arm {
10% {
width: 60px;
}
20% {
width: 0;
}
100% {
width: 0;
}
}
@keyframes tower {
47% {
transform: rotate(0);
}
60% {
transform: rotate(-90deg);
}
62% {
transform: rotate(-85deg);
}
63% {
transform: rotate(-90deg);
}
64% {
transform: rotate(-87deg) translateY(0px);
opacity: 1;
}
80% {
transform: rotate(-90deg) translateY(-100px);
opacity: 0;
}
100% {
transform: rotate(-90deg) translateY(-100px);
}
}
@keyframes blur {
0% {
filter: blur(30px);
}
4% {
filter: blur(0);
}
96% {
filter: blur(0);
}
100% {
filter: blur(30px);
}
}
@keyframes flight {
15% {
bottom: 40px;
left: 150px;
}
45% {
bottom: 90px;
left: 150px;
transform: rotateZ(0) rotateX(0) scale(1);
}
65% {
bottom: 90px;
filter: blur(0);
left: 155px;
transform: rotateZ(45deg) rotateX(0) scale(1);
}
100% {
bottom: 95%;
filter: blur(5px);
left: 98%;
transform: rotateZ(90deg) rotateX(35deg) scale(0);
}
}
@keyframes stars {
0%, 6% {
box-shadow: none;
}
3% {
box-shadow: 0 0 10px 3px white;
}
}
@keyframes explosion {
92%, 100% {
box-shadow: 0 0 0 0 orange;
}
97% {
box-shadow: 0 0 20vmin 20vmin orangered;
}
}
登月效果就到此结束了，登月是每一位中国人梦寐以求的梦想。小小切图仔只能通过css来实现自己的梦想了，用这种方式来告诉航天员，我们与你们同在，也希望他们能够平平安安的回来，在此我给他们送上最美好的祝福，也希望各位掘金小伙伴们送上你们最好的祝福。
创作来之不易，请多多点赞、收藏、关注支持一下，也谢谢掘金这个平台创办这个创意活动，在分享技术过程，也了解了中国的发展历史，谢谢！
