earth – Thingography.com https://thingography.com More than a Photo Gallery Mon, 18 Feb 2019 17:08:50 +0000 en-US hourly 1 Earth Moon Orbit CSS Animation https://thingography.com/css-earth/ https://thingography.com/css-earth/#respond 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%;} }

stars

moon

]]> https://thingography.com/css-earth/feed/ 0