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

The Mid-Autumn Festival, huan Drink Dandan, drunk, for this article, and huai son by. When does the moon appear? Ask the sky for wine. I wonder what year it is in the palace in the sky. I want to ride the wind and go home, but I fear that the heights will be lonely. Dance to see the shadow, what in the world. Turn zhu Ge, low yee door, according to no sleep. There should be no hate, for what is long round to parting? People have joys and sorrows, the moon waxes and wanes, this matter is difficult to complete. We wish each other a long life so as to share the beauty of this graceful moonlight, even though miles apart.

preface

Hello, I wish you a happy Mid-Autumn Festival ~~ (although in the past years, Su Shi’s poem is still in mind)

Look up at the moon down to write code

Dig friends apart thousands of miles, can not enjoy the moon to eat moon cake together in this reunion day (see the need to write code), then enjoy the moon together, next for you XDM, JMM prepare a moon, please take the moon cake on time to enjoy the moon oh!

The first step in moon appreciation

First, go out and look up at the sky.

Look at the sky, thousands of miles. (I’ve put a picture here with a black background for the sky, canvas is not very skilled O (╥﹏╥)o)

<! DOCTYPEhtml>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0" />
    <title>Look up at the moon down to write code</title>
  </head>
  <style>
    body {
      margin: 0;
    }
    .container {
      height: 100vh;
      background: black;
      background-image: url(../img/Otr0s.jpg);
      background-size: contain;
    }
   
  </style>
  <body>
    <div class="container">
     
    </div>
  </body>
</html>
Copy the code

The second step of moon appreciation

Starry sky, is the need for the moon,

 <body>
    <div class="container">
      <div class="moon">
        
      </div>
    </div>
  </body>
  <style>
     .moon {
      position: absolute;
      top: 150px;
      left: 50%;
      width: 400px;
      height: 400px;
      box-shadow: 0 0 40px 15px white;
      background-color: #fff;
      transform: translateX(-50%);
      border: 1px solid #fff;
      border-radius: 50%;
      opacity: 0.9;
      box-sizing: border-box;
    }
  </style>
  
Copy the code

box-shadow: 0 0 40px 15px white; Add a shimmering effect to the moon;

From afar, as if to see the scene of the Goddess of the Moon tamping medicine, then add some decoration to the moon:

 <body>
    <div class="container">
      <div class="moon">
        <div class="circle1"></div>
        <div class="circle2"></div>
        <div class="circle3"></div>
      </div>
    </div>
  </body>
  <style>
     .circle1 {
      position: absolute;
      top: 30px;
      right: 170px;
      width: 20px;
      height: 20px;
      background-color: darkgray;
      border-radius: 50%;
      opacity: 0.1;
      border: 1px solid # 333;
    }
    .circle2 {
      position: absolute;
      top: 110px;
      right: 260px;
      width: 50px;
      height: 50px;
      background-color: darkgray;
      opacity: 0.1;
      border: 1px solid # 333;
      border-radius: 50%;
    }
    .circle3 {
      position: absolute;
      top: 200px;
      right: 50px;
      opacity: 0.1;
      width: 80px;
      height: 80px;
      background-color: darkgray;
      border: 1px solid # 333;
      border-radius: 50%;
    }
  </style>
Copy the code

The third step of moon appreciation

The moon has, seems to lack the stars ah ~

The stars are coming

 <div class="start-box">
        <div class="star1"></div>
        <div class="star2"></div>
        <div class="star3"></div>
  </div>
Copy the code

Using some common CSS animations and styles, a simple moon was born. (Huo ꈍ ꈍ! (Humble praise ~~)

The complete code is as follows:

<! DOCTYPEhtml>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0" />
    <title>Look up at the moon down to write code</title>
  </head>
  <style>
    body {
      margin: 0;
    }
    .container {
      position: relative;
      background: black;
      height: 100vh;
      background-image: url(../img/Otr0s.jpg);
      background-size: contain;
    }
    .moon {
      position: absolute;
      top: 150px;
      left: 50%;
      width: 400px;
      height: 400px;
      box-shadow: 0 0 40px 15px white;
      background-color: #fff;
      transform: translateX(-50%);
      border: 1px solid #fff;
      border-radius: 50%;
      opacity: 0.9;
      box-sizing: border-box;
    }
    .circle1 {
      position: absolute;
      top: 30px;
      right: 170px;
      width: 20px;
      height: 20px;
      background-color: darkgray;
      border-radius: 50%;
      opacity: 0.1;
      border: 1px solid # 333;
    }
    .circle2 {
      position: absolute;
      top: 110px;
      right: 260px;
      width: 50px;
      height: 50px;
      background-color: darkgray;
      opacity: 0.1;
      border: 1px solid # 333;
      border-radius: 50%;
    }
    .circle3 {
      position: absolute;
      top: 200px;
      right: 50px;
      opacity: 0.1;
      width: 80px;
      height: 80px;
      background-color: darkgray;
      border: 1px solid # 333;
      border-radius: 50%;
    }
    .start-box {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      width: 700px;
      height: 500px;
    }
    .star1 {
      position: absolute;
      top: 200px;
      right: 0;
      width: 50px;
      height: 6px;
      border-radius: 5px;
      background-color: white;
      animation: shine 0.5 s linear infinite alternate;
    }
    .star1::after {
      position: absolute;
      top: -20px;
      right: 21px;
      width: 6px;
      height: 50px;
      border-radius: 5px;
      background-color: #fff;
      animation: shine 0.5 s linear infinite alternate;
      content: ' ';
    }
    @keyframes shine {
      100% {
        background-color: gold; }}.star2 {
      position: absolute;
      top: 300px;
      left: 0;
      width: 30px;
      height: 4px;
      border-radius: 5px;
      background-color: white;
      animation: shine 0.3 s linear infinite alternate;
    }
    .star2::after {
      position: absolute;
      top: -12px;
      right: 13px;
      width: 4px;
      height: 30px;
      border-radius: 5px;
      background-color: #fff;
      animation: shine 0.3 s linear infinite alternate;
      content: ' ';
    }
    @keyframes shine {
      100% {
        background-color: gold; }}.star3 {
      position: absolute;
      bottom: 20px;
      right: 60px;
      width: 30px;
      height: 4px;
      border-radius: 5px;
      background-color: white;
      animation: shine 0.1 s linear infinite alternate;
    }
    .star3::after {
      position: absolute;
      top: -12px;
      right: 13px;
      width: 4px;
      height: 30px;
      border-radius: 5px;
      background-color: #fff;
      animation: shine 0.1 s linear infinite alternate;
      content: ' ';
    }
    @keyframes shine {
      100% {
        background-color: gold; }}</style>
  <body>
    <div class="container">
      <div class="moon">
        <div class="circle1"></div>
        <div class="circle2"></div>
        <div class="circle3"></div>
      </div>
      <div class="start-box">
        <div class="star1"></div>
        <div class="star2"></div>
        <div class="star3"></div>
      </div>
    </div>
  </body>
</html>

Copy the code