earth – Thingography.com
https://thingography.com
More than a Photo Gallery
Thu, 13 Feb 2025 21:10:00 +0000
en-US
hourly
1
-
Earth Moon Orbit CSS Animation
https://thingography.com/css-earth/
Sun, 18 Feb 2018 20:05:46 +0000
http://thingography.com/my-things/?p=90
.ani-box {position: relative; height: 600px; width: 100%; border-top: solid 1px #000; border-bottom: solid 1px #000; background-color: transparent; overflow: hidden;}
#orbit {
position: relative;
width: 100%;
height: 600px;
margin: 0 auto;
overflow: hidden;
background-color: transparent;
box-sizing: content-box;
}
#clouds, #earth {
position: absolute;
top: 50%;
left: -9800px;
right: 0;
height: 410px;
margin-top: -205px;
z-index: 5;
box-sizing: content-box;
}
#clouds {
background: url(http://thingography.com/my-things/wp-content/uploads/css-img/earth/clouds5b.png) repeat-x 0 0;
animation: cloud1 500s linear infinite;
animation-delay: -20s;
}
#earth {
background: url(http://thingography.com/my-things/wp-content/uploads/css-img/earth/earth5.jpg) repeat-x 0 0;
animation: cloud1 2000s linear infinite;
}
@keyframes cloud1 {
0% {left:-9000px;}
100% {left: 9000px;}
}
.planet-box {width: 100%; height: 100%; position: absolute; left:0; top:0;}
#planet {
padding: 0px;
margin-left: -760px;
margin-top: -300px;
position: absolute;
top: 50%;
left: 50%;
width: 1520px;
height: 600px;
min-width: 1520px;
z-index: 15;
box-sizing: content-box;
}
#moon {
position: absolute;
top: 10px;
margin-left: -68px;
z-index: 100;
animation: moon 60s linear infinite;
box-sizing: content-box;
}
@keyframes moon {
0% {transform: scale(0.3,0.3); left:50%;}
12.5%{transform: scale(0.7,0.7); left:20%;}
25% {transform: scale(1.1,1.1); left:10%;}
37.5%{transform: scale(1.5,1.5); left:20%;}
50% {transform: scale(2.0,2.0); left:50%; top: 600px;}
62.5%{transform: scale(1.5,1.5); left:80%;}
75% {transform: scale(1.1,1.1); left:90%;}
87.5%{transform: scale(0.7,0.7); left:75%;}
100% {transform: scale(0.3,0.3); left:50%;}
}
]]>
