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

Thought for a long time did not think of what good originality, just thought of a poem today, the moon on the sea, the end of the world altogether at this time. This led to some ideas, specially made to share with you.

Results the preview

conceived

What I want to do is to slowly rise a moon on the sea, there are stars in the sky, the stars will shine, the moon rises from the sea, that is so simple, the following together to achieve it. First, let’s determine the overall picture composition, which looks something like this.

implementation

The sky and sea are easy to implement, just two divs and a background gradient

  <div class="wrap">
    <div class="sky" id="sky">
    </div>
    <div class="sea">
    </div>
  </div>
Copy the code
    * {
      margin: 0;
      padding: 0;
    }
    .wrap {
      width: 100vw;
      height: 100vh;
      display: flex;
      flex-direction: column;
    }
    .sky {
      height: 50%;
      background-image: linear-gradient(# 020525.#00085f);
    }
    .sea {
      height: 50%;
      box-shadow: 0 0 10px 5px # 020525;
      background-image: linear-gradient(# 020525.#00085f);
    }
Copy the code

What, like a Dead Sea under a dark night

After you animate, you will see the moon. After you animate, you will see the moon. After you animate, you will see the moon. For the effect of the moon rising from the sea, we used Overflow: Hidden.

The reflection of the moon on the sea is usually not very clear, so we use opacity reduction on opacity and filter: blur(10px) to create a Gaussian blur.

  <div class="wrap">
    <div class="sky" id="sky">
      <div class="sky_moon moon"></div>
    </div>
    <div class="sea">
      <div class="sea_moon moon"></div>
    </div>
  </div>
Copy the code
.sky {
  height: 50%;
  background-image: linear-gradient(# 020525.#00085f);
  position: relative;
  overflow: hidden;
}
.sea {
  height: 50%;
  box-shadow: 0 0 10px 5px # 020525;
  background-image: linear-gradient(# 020525.#00085f);
  position: relative;
  overflow: hidden;
}
.moon {
  width: 200px;
  height: 200px;
  background: #f1eacb;
  box-shadow: 0 0 10px 5px rgba(255.255.255.25);
  border-radius: 50%;
  position: absolute;
  left: 50%;
  margin-left: -100px;
}
.sky_moon {
  top: 10%;
  animation: skymove ease-out 5s;
}
.sea_moon {
  bottom: 10%;
  opacity:.2;
  filter: blur(10px); 
  animation: seamove ease-out 5s;
}
Copy the code

This is done, actually the main functionality is implemented, but the picture is too drab, we can add some stars to add to the night sky of stars, we gave it to a random location, then use to give to a flash animation animation effect, but if add together, all the stars will flash together, the result is bad, So when we added the star, we gave it a timer, with a random delay of less than 1 second, so that the flicker was spaced and more logical.

.star {
  position: absolute;
  width: 2px;
  height: 2px;
  background: #f1eacb;
  animation: star infinite 2s;
}
@keyframes star {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0; }}Copy the code
  const sky = document.getElementById('sky')
  function addStar (length) {
    for (let index = 0; index < length; index++) {
      setTimeout(function () {
        let star = document.createElement('div')
        star.className = 'star'
        let width = document.body.clientWidth
        let height = document.body.clientHeight / 2
        let left = Math.random() * width + 'px'
        let top = Math.random() * height + 'px'
        star.style.top = top
        star.style.left = left
        sky.append(star)
      }, Math.random() * 1000)
      
    }
  }
  addStar(10)
Copy the code