I am participating in the Mid-Autumn Festival Creative Submission contest, please see: Mid-Autumn Festival Creative Submission Contest for details

Raise a glass to invite the moon, to the shadow into three. ———— Li Bai, Drinking Alone under the Moon

Every time to the Mid-Autumn Festival, it is the time when the old people homesick, some people because of work problems, some physical problems, some people can not go home to visit their relatives, at this moment they are very miss home, miss family.

The Chinese astronauts in the sky are no exception. The Mid-Autumn Festival is also the moment when they miss their hometown most. But because they shoulder the task entrusted to them by the country is very important, they can not go back home to spend the Mid-Autumn Festival with their families.

The family is looking forward to them, the people are looking forward to them, the country is looking forward to their smooth return, just like Li Bai said: raise a glass to invite the moon, the shadow into three

As a front end cutter, I salute them in my own way. I hope you can watch it

The moon effects

Let me show you the animation effect.

This is also very simple to implement. Look at the steps. (Each step has a little story)

  1. Step 1: Achieve the night sky stars and moon

Under the dark night sky, The Chinese space station turned into stars dotted the space, the moon lit up the earth, and we shared the same moon with the Chinese astronauts.

// HTML <div class="space"> // Moon <div class="explosion"></div> </div> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </div>Copy the code
// 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;
}
Copy the code

Look at the renderings

  1. The second step is to realize mountain scenery and woods

If China’s natural environment is getting better and better, it cannot do without the efforts of every Chinese, and WE hope it will continue.

  // 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>
Copy the code
// 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; }}}Copy the code

Look at the renderings

  1. The third step is to realize the rocket launcher and the rocket

From 1956 to 2021, from Qian Xuesen to today’s space scientists, Chinese scientists step by step, with a lifetime of painstaking efforts to research rockets, to create space belonging to the Chinese people, we are proud of you….

 
  <div class="tower">
    <div class="arm">
    </div>
  </div>
  
  <div class="rocket">
    <div class="tail"></div>
    <ul class="flames">
      <li></li>
      <li></li>
    </ul>
  </div>
Copy the code
.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; }Copy the code

See the effect

  1. Finally, add the lift-off animation
// css @keyframes fire { 0% { opacity: .6; transform: scale(.96) rotate(-3deg); } 10% { opacity: .8; Rotate the transform: scale (1.01) (2 deg); } 20% { opacity: .5; transform: scale(.96) rotate(-1deg); } 30% { opacity: .7; The rotate transform: scale (1.01) (0); } 40% { opacity: .6; transform: scale(.96) rotate(1deg); } 50% { opacity: .8; Rotate the transform: scale (1.01) (2 deg); } 60% { opacity: .5; transform: scale(.96) rotate(1deg); } 70% { opacity: .7; The rotate transform: scale (1.01) (0); } 80% { opacity: .45; transform: scale(.96) rotate(-1deg); } 90% { opacity: .6; Rotate the transform: scale (1.01) (2 deg); } } @keyframes flames { 0% { opacity: .3; transform: scale(.3); } 7% { opacity: .3; transform: scale(.3); } 10% { opacity: .7; The transform: scale (1.2); } 15% { opacity: 1; transform: scale(.8); } 40% { opacity: .9; transform: scale(.8); } 50% { opacity: .9; The 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; }}Copy the code

That’s the end of the moon landing effect, which is the dream of every Chinese. In this way to tell the astronauts, we are with you, but also hope they can come back safely, here I give them the best wishes, also hope you nuggets friends to send your best wishes.

Creation is not easy to come by, please like, collect, pay attention to support, and thank the platform of Digging Gold for creating this creative activity, in the process of sharing technology, but also understand the development history of China, thank you!