Have a hand will series – realize the sun, earth and moon revolution

In the process of business development, date formatting, URL parameter to object, browser type judgment, throttling function and other common functions are often used. In order to avoid the trouble of multiple copy and paste of different projects, I have packaged the tool library github.com/CatsAndMice… . If you have common code, please submit pr for this project.

preface

The employee’s helplessness, the company requires everyone to undertake training. To complete it, I searched the Internet for several demos, but none of them made me want to implement a wave. Daily browsing nuggets, came across a [Mid-Autumn] pure CSS to achieve the sun, earth and moon revolution, the decision is it.

Implementation effect: Solar earth-moon revolution (codepen.io)

Realize the revolution of the sun, earth and moon

HTML layout

The layout is very simple, with three divs representing day, earth, and month, plus div.contian for wrapping

<div class="contian">
    <div class="sun"></div>
    <div class="earth">
        <div class="moon"></div>
    </div>
</div>
Copy the code

Setting the Global Background

Margin :8px; If the layout is affected, remove it

HTML and body are block-level elements that occupy a single line but do not fill the window height. We need them to span the entire window and set them to height:100vh;

html.body {
    margin: 0;
    padding: 0;
    background-color: #2f3141;
    height: 100vh;
}
Copy the code

Positioning center

We need to center everything relative to the browser window: Flex,grid layout, positioning, margin, etc.

Here’s how to center margin:

Give the content a specific width and height and set margin-left:aute; margin-right:aute; Also via calc((100vh – content height) / 2)

Get the margin-top value.

Of course, using margin center is troublesome, but HERE I only offer one idea.

Sun, earth and moon centered, I chose to use positioning to finish

The body fills the window, and we use the body for absolute positioning. Before positioning, you need to set the relative positioning attribute position: relative for the body. Then add the absolute position attribute to div.contian: Position: absolute;

html.body {
    margin: 0;
    padding: 0;
    background-color: #2f3141;
    position: relative;
    height: 100vh;
}

.contian {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 500px;
    height: 500px;
    border: 1px solid #ccc;
    transform: translate(-50%, -50%);
}
Copy the code

In absolute positioning, the values of top and left are based on the upper left corner of div.contian, so when left:50%; Right :50% div.contian is not in the middle. The left and right values of the page need to be reduced by the width and height of the div.contian itself.

To do this, I used transform: Translate (-50%, -50%); I’m going to move it by -50% in the X direction and -50% in the Y direction depending on its width and height.

Setting the transform can be understood as creating a 3D coordinate as shown below. The difference is that the Z-axis is facing the screen and facing you in front of the screen. There’s not much text here for transform

To make it more intuitive, I added a border to div. Contian

Simulate and realize the sun

Similarly, make div. Sun absolutely centered relative to div. Contian. Set border-radius:50% drawn as a circle, and backgroud filled with linear gradient; For better effect, give div.sun an outer shadow

Set the width and height of the div.sun element to box-shadow: 0 08px 8px rgba(242, 120, 75, 0.2);

.sun {
    position: absolute;
    border-radius: 50%;
    height: 200px;
    width: 200px;
    left: 50%;
    top: 50%;
    background: linear-gradient(#fcd670.#f2784b);
    transform: translate(-50%, -50%);
    box-shadow: 0 0 8px 8px rgba(242.120.75.0.2);
}
Copy the code

The sun effect is shown below:

Simulated earth

The earth’s orbit around the sun

The earth moves around the sun in a circular orbit. We can set the width and height of div.earth to be the same as that of the outermost div.contian

I also added a border attribute to div.earth for visualization

.earth {
    width: 500px;
    height: 500px;
    border-radius: 50%;
    border:1px solid #f2784b;
}
Copy the code

This circular border will be used for the earth’s orbit around the sun

Pseudo elements::beforeImplement the planet

The planets are simulated with a circle, again using border-radius: 50%; Gradient the background. Position the Earth directly above the earth’s orbit, that is, div. Earth

.earth {
  //...
  position: relative;
}
.earth::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60px;
    height: 60px;
    background: linear-gradient(#19b5fe.#7befb2);
    border-radius: 50%;
}
Copy the code

The earth effect is shown below:

Pseudo elements::afterAchieve planetary tail

Planet tail border simulation, set ::after pseudo-element width:100%; heigth:100%; , fill the div. Earth

After border-top:px solid silver; border-left:22px solid transparent;

Remove the border of div. Earth, and at this point we can clearly see the tail of the planet coming out

However, the tail of the planet is not connected to the Earth. RotateZ in transform can be set to rotate it counterclockwise around the Z-axis

At this point, the Earth is complete, all it needs is for it to orbit the sun

Add animation to div.earth and define the animation keyframes so that div.earth rotates clockwise on the z-axis

.earth {
    width: 500px;
    height: 500px;
    border-radius: 50%;
    position: relative;
    animation: rotate 20s linear infinite;
}

@keyframes rotate {
    0% {
        transform: rotateZ(0deg);
    }

    100% {
        transform: rotateZ(360deg); }}.earth::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60px;
    height: 60px;
    background: linear-gradient(#19b5fe.#7befb2);
    border-radius: 50%;
}
 .earth::after {
      position: absolute;
      content: "";
      width: 100%;
      height: 100%;
      border-top: 2px solid silver;
      border-right: 2px solid transparent;
      border-radius: 50%;
      transform: rotateZ(-52deg);
  }
Copy the code

After adding animation properties:

Simulate the moon

<div class="earth">
    <div class="moon"></div>
</div>
Copy the code

In the HTML layout, div.moon is wrapped in div.earth, so we still fix div.moon to the earth orbit, which is directly above div.earth

The moon’s orbit should be larger than the earth’s

.moon {
    position: absolute;
    left: 50%;
    top: 0;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    border: 1px solid #19b5fe;
    transform: translate(-50%, -50%);
}
Copy the code

I added a border to div.moon for intuition

What is left is to use the pseudo-elements of div.moon to simulate the moon and its spinning tail, in the same way that the earth was simulated

At this point, the article does not add text to describe the idea

Finally, delete the unnecessary border, and a handy sun-earth-moon revolution is completed

Complete code is not posted, want source code to move the sun, earth and moon revolution (codepen.io)

Of course, can also be extended to achieve 3D effect of rotation, interested in the little guy can be implemented

Achieve the rotation of the planet (codepen.io)

conclusion

In this paper, cSS3 attributes such as location, transform and animation are used to realize the sun-earth-moon revolution from 0 to 1