Using CSS to realize the animation effect of the sun, the earth and the moon
This article mainly explains "using CSS to realize the animation effect of the sun, the earth and the moon." interested friends may wish to have a look. The method introduced in this paper is simple, fast and practical. Next, let the editor take you to learn "using CSS to achieve the animation effect of the sun, the earth and the moon."
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;}
Animation of the sun, the earth and the moon
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) } at this point, I believe you have a deeper understanding of "using CSS to realize the animation effect of the sun, the earth and the moon". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!
