<!DOCTYPE html>
<html>
<head>
<title>Earth Rotation Animation | CSS</title>
<style>
body, ht
ml {
height:100%;
margin:0;
padding:0;
}
body {
background:-webkit-radial-gradient(#376888, #2d5772, #1c3545);
background:radial-gradient(#376888, #2d5772, #1c3545);
}
.earth {
width:200px;
height:200px;
background-image:url( https://raw.githubusercontent.com/cartalan/TierraGirando/master/img/mapa.png);
background-size:cover;
border-radius:50%;
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
margin:auto;
box-shadow:-30px -20px 0 0 rgba(0,0,0,.15) inset, -70px -30px 0 0 rgba(0,0,0,.1) inset, 5px 5px 0 0 rgba(255,255,255,.2) inset;
-webkit-animation:rotationEarth 5s infinite linear;
-moz-animation:rotationEarth 5s infinite linear;
animation:rotationEarth 5s infinite linear;
}
@-webkit-keyframes rotationEarth {
from {
background-position:left center;
}
to {
background-position: -396px center;
}
}
@keyframes rotationEarth {
from {
background-position:left center;
}
to {
background-position: -396px center;
}
}
</style>
</head>
<body>
<div class="earth"></div>
</body>
</html>
http://pngimg.com/uploads/earth/earth_PNG40.png
No comments:
Post a Comment