Shulou(Shulou.com)06/03 Report--

How to use CSS to achieve the rotation of the earth and the moon, many novices are not very clear about this, in order to help you solve this problem, the following editor will explain for you in detail, people with this need can come to learn, I hope you can gain something.

Pure CSS realizes the revolution of the sun, the earth and the moon

Preface

After thinking hard for two days for the Nuggets' Mid-Autumn Festival, I finally thought of something that no one had ever done in the Nuggets (probably not done, I don't know)-using HTML+CSS to simulate the revolution of the sun, the earth and the moon.

We all know that the moon of the Mid-Autumn Festival is big and round because the sun, the earth and the moon are in a straight line during the revolution, with the earth in the middle, the sun and the moon at both ends of the earth, and the phase of the moon is the full moon. This paragraph can be skipped in order to have something to do with the Mid-Autumn Festival.

But because I haven't learned the front end at all, I've restudied flexbox and grid in the past two days, and the results should be said to be pretty good (if there's nothing wrong with my aesthetics).

I like the color matching. I hope you like it, too.

I put the source code on CodePen and linked to https://codepen.io/Mancuoj/pen/zYzwwEg

HTML

The point is that CSS,HTML put three div and OK.

Mancuoj Mancuoj background and text

Import my favorite Lobster font and set it to white with a smaller font.

@ import url ("https://fonts.googleapis.com/css2?family=Lobster&display=swap");h2 {color: white; font-size: 60px; font-family: Lobster, monospace; font-weight: 100;})

The background randomly found a dark purple, and then set the content of the painting to the middle.

Body {margin: 0; height: 100vh; display: flex; align-items: center; justify-content: center; background-color: # 2f3141;} .container {font-size: 10px; width: 40eme; height: 40em.position: relative; display: flex; align-items: center; justify-content: center;} Sun, Earth and Moon Animation

It is well known that the earth revolves around the sun and the moon revolves around the earth.

What we draw is a revolution, and the sun will draw it directly and add a shadow highlight, and the moon and the earth will turn.

The most important thing is actually color matching (there is a recommended website at the end of the article). I have been experimenting with color matching for a long time and finally used three gradient colors to represent the sun, the earth and the moon.

Linear-gradient (# fcd670, # f2784b); ground: linear-gradient (# 19b5fe, # 7befb2); month: linear-gradient (# 8d6e63, # ffe0b2)

CSS should not be difficult for everyone, just take a look.

The orbit uses border, and silver lines are used as the orbit of the revolution.

The animation uses its own animation, which is rotated one at a time.

Sun {position: absolute; width: 10em.height: 10em.background: linear-gradient (# fcd670, # f2784b); border-radius: 50%; box-shadow: 0 8px 8px rgba (242,120,75,0.2);} .earth {--diameter: 30;-- duration: 36.5;} .moon {--diameter: 8;-- duration: 2.7; top: 0.3mm; right: 0.3em } .earth, .moon {position: absolute; width: calc (var (--diameter) * 1em); height: calc (var (--diameter) * 1em); border-width: 0.1em; border-style: solid solid none none; border-color: silver transparent transparent transparent; border-radius: 50%; animation: orbit linear infinite; animation-duration: calc (var (--duration) * 1s) } @ keyframes orbit {to {transform: rotate (1turn);}}. Earth::before {--diameter: 3;-- color: linear-gradient (# 19b5fe, # 7befb2);-- top: 2.8;-- right: 2.8;}. Moon::before {--diameter: 1.2;-- color: linear-gradient (# 8d6e63, # ffe0b2);-- top: 0.8;-- right: 0.2 } .earth:: before,.moon::before {content: "; position: absolute; width: calc (var (--diameter) * 1em); height: calc (var (--diameter) * 1em); background: var (--color); border-radius: 50%; top: calc (var (--top) * 1em); right: calc (var (--right) * 1em);} is it helpful for you to read the above? If you want to know more about the relevant knowledge or read more related articles, please follow the industry information channel, thank you for your support.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.