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

This article mainly introduces how to use pure CSS to achieve the movement of the sun and the earth and the moon model animation, has a certain reference value, interested friends can refer to, I hope you can learn a lot after reading this article, the following let Xiaobian take you to understand.

Code interpretation

Define the dom. The container contains three elements:

Centered display:

Body {

Margin:0

Height:100vh

Display:flex

Align-items:center

Justify-content:center

Background-color:black

}

Define the container size:

.container {

Font-size:10px

Width:40em

Height:40em

Position:relative

}

Draw the sun:

.sun {

Position:absolute

Top:15em

Left:15em

Width:10em

Height:10em

Background-color:yellow

Border-radius:50%

Box-shadow:003emwhite

}

Draw the trajectory of the earth and the moon:

.earth

.moon {

Position:absolute

Border-style:solid

Border-color:whitetransparenttransparenttransparent

Border-width:0.1em0.1em00

Border-radius:50%

}

.earth {

Top:5em

Left:5em

Width:30em

Height:30em

}

.moon {

Top:0

Right:0

Width:8em

Height:8em

}

Draw the earth and the moon with pseudo elements:

.earth:: before

.moon:: before {

Position:absolute

Border-radius:50%

Content:''

}

.earth:: before {

Top:2.8em

Right:2.5em

Height:3em

Width:3em

Background-color:aqua

}

.moon:: before {

Top:0.8em

Right:0.2em

Width:1.2em

Height:1.2em

Background-color:silver

}

Animate the run:

/ * rotationperiod365.2422days*/

.earth {

Animation:orbit36.5slinearinfinite

}

/ * rotationperiod27.322days*/

.moon {

Animation:orbit2.7slinearinfinite

}

@ keyframesorbit {

To {

Transform:rotate (360deg)

}

}

Finally, hide the parts that may appear outside the container:

Body {

Overflow:hidden

}

Thank you for reading this article carefully. I hope the article "how to realize the running model animation of the sun and the earth and the moon with pure CSS" shared by the editor will be helpful to everyone. At the same time, I hope you will support us and pay attention to the industry information channel. More related knowledge is waiting for you to learn!

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.