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

preface

Before we get to the nitty gritty, let’s get to the basics. The various phases of the moon, also known as lunar phases.

“New moon”, also known as “Shuori”, is the first day of the lunar calendar.

“Crescent moon”, at this time is the lunar calendar three, four;

On the seventh and eighth days of the lunar calendar, people can see the half moon (convex to the west) facing the earth. This month is called the first quarter moon.

On the 15th, 16th and 17th days of the lunar calendar, the bright area of the moon is facing the Earth, and we can see a full moon. This month is called the “full moon”, or “wang”.

On the twenty-second and twenty-third days of the lunar calendar, we can see another half moon (convex to the east). This month is called the “second quarter moon”.

The overall layout

Black background panel

html.body {
  width: 100%;
  height: 100%;
  border-radius: 0;
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #2c2f36;
  color: white;
}
Copy the code

The sky

.sky {
  width: 60%;
  height: 100%;
  border-radius: 15px;
  overflow: hidden;
  background: linear-gradient(#1d2b49, #1a45a0, #91cdff, #fff);
  background-size: 100% 300%;
  box-shadow: 0px 0px 30px rgb(0 0 0 / 30%);
  cursor: pointer;
  position: relative;
}
Copy the code

figure

summary

Above we build a picture of the ancient people watching the moon, but the moon and poetry are missing.

Waning moon

Twilight river Yin Bai Juyi a sun shop in the water, half river rustling half river red. Poor September third night, dew like a true pearl moon like a bow.Copy the code

The implementation of the waning moon is relatively simple, first using border-radius, make a circle. The background is black. Then set an inner shadow

.moon {
  width: 50px;
  height: 50px;
  position: absolute;
  right: 50px;
  top: 100px;
  border-radius: 50%;
  background-color: #2c2f36;
  box-shadow: inset 10px 0px rgb(255 255 255 / 90%);
Copy the code

In the last quarter

For the last quarter moon, the easiest way.

Start with a black background circle

.moon-bk{
  width: 50px;
  height: 50px;
  border-radius: 50%;
  position: absolute;
  right: 50px;
  top: 100px;
  background-color: #2c2f36;
}
Copy the code

Then use z-index + border-radius to set a white semicircle.

.moon {
  width: 25px;
  height: 50px;
  position: absolute;
  right: 50px;
  top: 100px;
  border-radius:0px 25px 25px 0px;

  background-color: rgb(255 255 255 / 90%);
}
Copy the code

The second method:

Use clip-path to create a circle and move it around.

.moon {
  width: 50px;
  height: 50px;
  position: absolute;
  right: 50px;
  top: 100px;
  clip-path: circle(25px at 50px 25px);
  transform: translate(-50%, 0%);
  background: rgb(255 255 255 / 90%);
}
Copy the code

The full moon

Full moon huaiyuan Zhang Jiuling sea born bright moon, the end of the world at this time. Lovers hate night, unexpectedly from the night of acacia. Extinguish candle flow light is full, put on clothes feel dew. Unbearable hand gift, but also sleep dream.Copy the code

On a string

This may seem complicated at first glance, but in fact it is very simple, mainly using border-radius and clip-path for production.

.moon {
  width: 50px;
  height: 50px;
  position: absolute;
  right: 50px;
  top: 100px;
  border-radius: 50%;
  background-color: rgb(255 255 255 / 90%);
  clip-path: ellipse(25px 27px at 19px 25px ) 
} 
Copy the code

Let the moon move

Above we simply implemented the static moon, below we let it move.

The idea is simple: CSS animation + Sprite art.

Start with a Sprite:

Then locate the positioning of the 7 states:

Positioning if there is no UI design, it is really difficult to find, on these several positions adjusted for a long time!!

@keyframes moon-shadow {
  / * new * /
  0% {
    right: 10px;
    top: 200px;
    background-position: -15px -60px;
  }
  15% {
    right: 60px;
    top: 150px;
    background-position: -40px -60px;
  }
  30% {
    right: 110px;
    top: 100px;
    background-position: -80px -60px;
  }
  45% {
    right: 160px;
    top: 80px;
    background-position: -129px -60px;
  }
  60% {
    right: 210px;
    top: 100px;
    background-position: -176px -60px;
  }
  85% {
    right: 260px;
    top: 150px;
    background-position: -210px -60px;
  }
  100% {
    right: 310px;
    top: 200px;
    background-position: -250px -60px; }}Copy the code

Call animation:

background: url(./sprit2-removebg.png) no-repeat;
animation: moon-shadow 15s step-start both infinite;
Copy the code

The end result:

In fact, here is the change of the ancient poem, specially did not put out, the implementation is very simple, I hope you do not just look, you can try!!

Afterword.

In fact, a style or animation, there are many kinds of CSS properties to choose the implementation! This article, in fact, a bit of attribute hard means in, a lot of things can be realized in other simpler ways, in order to let everyone use more convenient attributes, can only be hard. Finally, there are many ways to achieve the effect of the moon moving. Here is a simple introduction of Sprite. I hope you can try more.

PS: specially left a bug, ha ha!! Let’s hope someone notices.