Using CSS3 to realize the Earth's rotation

This article mainly introduces the use of CSS3 to achieve the Earth's rotation, has a certain reference value, and now share to everyone, there is a need for friends can refer to

CSS3 to achieve the Earth's rotation, incredible ah, but can be achieved, not to believe that friends can read this article, with the source code

Final results:

Material: two pictures,

Espaco.jpg (1600*1000)

Terra.jpg (900*450)

The first step is to form a static diagram (the Earth's background is full screen, the earth size is 450px*450px, the earth position is centered around it):

<! DOCTYPE html>
：


The second step is to form a circular earth effect while adding the lunar halo effect :

/* Add the following attribute style to Earth */border:1px solid Rgba (26,18,101,0.3); /* form round edge effect, visual effect better, do not also line * * BORDER-RADIUS:225PX; /* Causes the earth to 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; /* Create a circular outer blur lunar halo effect */
：


The third step is to 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, forming day and night effect */    left:0;    Position:absolute;    top:0;    height:450px;    width:450px;}
：


The final step is to form the effect of the Earth's rotation :

@-webkit-keyframes Loop {% {background-position:0 0;} %{background-position: -900px 0;} /* The size of the world map is 900*450, so background-position-x: -900px */}/* Add the following style to Earth */-webkit-animation:loop 20s linear infinite; /* This time can be set, if you want the earth to turn a little faster, the time to change a little bit, such as 10s * *
The above is the whole content of this article, I hope that everyone's learning has helped, more relevant content please pay attention to topic.alibabacloud.com!