Vamos a ver como transformar una imagen estatica normal y corriente en una bola del mundo con efectos y animacion sin utilizar ningun tipo de javascript. En este caso vamos a utilizar la siguiente imagen del mapa terraqueo:
Ahora, aplicando solamente estilos CSS tales como border-radius, animation y box-shadow entre otras, conseguiremos 'redondear' la imagen y hacer que gire sin parar. Aplicandole las sombras pertinentes, ademas de darle una sensacion de relieve, imitaremos la funcion del sol, viendo como se hace de noche y de dia consecutivamente. ¿El resultado? Aqui mismo lo teneis.
ver codigo utilizado
<center><div class="mundo"></div></center>
<style>
.mundo{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEieMnScaaMwNmWFoDPi_nBQdrErz1utLdoWTP1nb38lit_DHsEPx426JyVP9o5QRqWmJ5SK-nW8INvmyag-hjwDAUQpNGcALCyCKL0KRKaUJxZUqi0GovU3ac-9Y4U3H6w-5aEU0_C4hpg/s727/mapa%2520del%2520mundo%2520-%2520REDEANDO.png) repeat-x 0 0;
width: 365px;
height: 365px;
border-radius: 365px;
position: relative;
border:1px solid #295fad;
animation: turn 25s infinite linear;
-webkit-animation: turn 25s infinite linear;
box-shadow: 0px 15px 60px rgba(255,255,255,0.5) inset,1em 0px 0px rgba(255,255,255,0.1) inset;
}
@keyframes turn {
0% { background-position: 0 0}
50% { background-position: -365px 0;box-shadow: 0px 15px 20px rgba(255,255,255,0.5) inset,25em 0px 80px rgba(0,0,0,0.8) inset;}
100% { background-position: -727px 0}
}
@-webkit-keyframes turn {
0% { background-position: 0 0}
50% { background-position: -365px 0;box-shadow: 0px 15px 20px rgba(255,255,255,0.5) inset,25em 0px 80px rgba(0,0,0,0.8) inset;}
100% { background-position: -727px 0}
}
</style>
