Earth Rotation Using Css

by muthu 2013-11-13 14:33:56

Earth Rotation Using Css
earth.gif

---------------------------------------- Css Code ----------------------------------------

.earth_area { margin:0; width:500px; height:500px; border:1px solid transparent;
-webkit-border-radius:500px; -moz-border-radius:500px; border-radius:500px; overflow:hidden;
background:url(map1.jpg) top left no-repeat;
-webkit-animation: rotate 10s infinite linear; -moz-animation: rotate 10s infinite linear;
-ms-animation: rotate 10s infinite linear; -moz-box-shadow: 0px 5px 15px #888;
-webkit-box-shadow: 0px 5px 15px #888; box-shadow: 0px 5px 15px #888; }
.earth { position:absolute; width:500px; height:500px;
background:url(globe.png) top left no-repeat }
@-webkit-keyframes rotate{ 0% { background-position:0px 0px; }
100% { background-position:-1150px 0px; } }
@-ms-keyframes rotate{ 0% { background-position:0px 0px; }
100% { background-position:-1150px 0px; } }
@-moz-keyframes rotate{ 0% { background-position:0px 0px; }
100% { background-position:-1150px 0px; } }

---------------------------------------- Html Code ----------------------------------------


<div class="earth_area"><div class="earth"></div></div>


---------------------------------------- Used Images ----------------------------------------

map1.jpg
globe.png
679
like
1
dislike
0
mail
flag

You must LOGIN to add comments