[Css3] Reading blogs to learn other people's rotating planet-tao shihan

[Css3] Reading blogs to learn other people's rotating planet-tao shihan defines a p sun orbit sunline, the border is displayed, and the position is defined as relative

# Sunline {

Width: 500px;

Height: 500px;

Border: 2px solid #000;

Border-radius: 50%;

Margin: 50px auto;

Position: relative;

Animation: sunRotate 5S;

}

Define a p sun, place the red sun in the center, and define the position as absolute,

50% to the left, 50% to the top, half of the width to the left, and half of the height to the bottom.

# Sun {

Background: red;

Width: 150px;

Height: 150px;

Position: absolute;

Left: 50%;

Top: 50%;

Margin-left:-75px;

Margin-top:-75px;

Border-radius: 50%;

}

Defines the earth's orbit earthline. The border is displayed. The position is defined as absolute, which is 50% from the left, half the height of the negative on the drama, and half the width of the negative on the left.

# Earthline {

Width: 200px;

Height: 200px;

Border: 1px solid #000;

Border-radius: 50%;

Position: absolute;

Left: 50%;

Top:-100px;

Margin-left:-100px;

}

Define a p earth, place the earth in the horizontal center, the sun orbit perpendicular to the earth center, define the position as absolute, from the left 50%, drama 50%, left half of the negative width, half of the height of the negative margin

# Earth {

Background: green;

Width: 100px;

Height: 100px;

Border-radius: 50%;

Position: absolute;

Left: 50%;

Margin-left:-50px;

Top: 50%;

Margin-top:-50px;

}

Define a moon, and define the position as absolute. It is 50% away from the left, half the height of the negative in the drama, and half the width of the negative on the left.

# Moon {

Width: 40px;

Height: 40px;

Background: blue;

Border-radius: 50%;

Position: absolute;

Left: 50%;

Margin-left:-20px;

Top:-20px;

}

Define the animation @ keyframes. When the progress is 100%, rotate it in a circle.

@ Keyframes sunRotate {

100% {

Transform: rotate (360deg );

}

}

Bind an animation to sunline of the sun track. Use the attribute animation. parameters: Rule name, execution time, speed curve, delay time, playback times, and whether to reverse the animation.

Animation: sunRotate 10 s linear 0 s infinite;

Speed curve: linear (linear Uniform speed) Slow)

Playback times: infinite (unlimited)

Bind an animation to Earth orbit earthline

Animation: sunRotate 5S linear 0 s infinite; run time is different, this fast