Pure css3 for Earth Rotation

Final results:

Material: Two images,

Espaco .jpg (1600*1000)

Terra.jpg (900*450)

 

Step 1: form a static map (the Earth's background is full screen, the Earth size is pixel PX * pixel PX, and the Earth is located in the center of the upper and lower sides ):

<! DOCTYPE html> 
:

 
Step 2: form the circular Earth Effect and add the monthly halo effect:
/* Add the following attribute styles to Earth */Border: 1px solid rgba (101, 0.3,);/* to form a circular edge with better visual effects, do not do this either */border-radius: 225px;/* make the earth form a circular effect */box-Shadow:-8px 0 25px rgba (256,256,256, 0.3 ), -1px-2px 14px rgba (256,256,256, 0.5) inset;/* blur the moon halo effect outside the circle */
:

 
Step 3: form the day and night effect:
. Earth: Before {content: ""; border-radius: 225px; box-Shadow:-150px-6px 25px rgba (0,0, 0, 0.7) inset;/* ARC shadow, effect of day and night */left: 0; position: absolute; top: 0; Height: pixel PX; width: pixel ;}
:

 
The last step forms the earth's rotation effect:
@-WebKit-keyframes loop {0% {background-position: 0 0;} 100% {background-position:-900px 0;}/* the size of the world map is 900*450, therefore, background-position-X:-900px */}
/* Add the following style to Earth */
-WebKit-Animation: loop 20 s linear infinite;/* this time can be set. If you want to speed up the earth, you can just change the time to a smaller value, for example, 10 s */
 
Related Files:Planetearth.rar