solar system – Thingography.com https://thingography.com More than a Photo Gallery Tue, 06 Nov 2018 14:03:13 +0000 en-US hourly 1 Pure CSS Solar System Orbits Animation https://thingography.com/css-solar-system/ https://thingography.com/css-solar-system/#respond Sun, 18 Mar 2018 17:15:48 +0000 http://thingography.com/?p=2115 .ani-box {width: 100%; height: 800px; background-image: url('http://thingography.com/my-things/wp-content/uploads/css-img/solar-system/stars.png'); overflow: hidden; background-color: #000;} #ss-container { margin: -260px auto 0px auto; width: 1220px; height: 1220px; position: relative; transform: scale(0.6); } #sol, #mercury, #mars, #earth, #venus, #asteroid, #jupiter, #saturn, #uranus, #neptune { left: 50%; top: 50%; position: absolute; border: 1px solid #000000; border-radius: 50%; } #sol { margin: -50px 0 0 -50px; width: 100px; height: 100px; border: 0 solid #FFFF00; background: #fefcea; background: -moz-radial-gradient(center, ellipse cover, #fefcea 0%, #f1da36 100%); background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#fefcea), color-stop(100%,#f1da36)); background: -webkit-radial-gradient(center, ellipse cover, #fefcea 0%,#f1da36 100%); background: -o-radial-gradient(center, ellipse cover, #fefcea 0%,#f1da36 100%); background: -ms-radial-gradient(center, ellipse cover, #fefcea 0%,#f1da36 100%); background: radial-gradient(ellipse at center, #fefcea 0%,#f1da36 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fefcea', endColorstr='#f1da36',GradientType=1 ); box-shadow: 0 0 30px 10px #FFFF00; } .orbit-1, .orbit-2, .orbit-3, .orbit-4, .orbit-5, .orbit-6, .orbit-7, .orbit-8, .orbit-9 { border: .08em solid #555555; border-radius: 50%; position: absolute; top: 50%; left: 50%; } .orbit-1 { margin: -75px 0 0 -75px; width: 150px; height: 150px; animation:orbit 4.8s linear infinite; } #mercury { margin: 0 0 0 73.5px; width: 3px; height: 3px; background-color: #FFF; animation: turn 4.8s linear infinite; } .orbit-2 { margin: -85px 0 0 -85px; width: 170px; height: 170px; animation: orbit 12.4s linear infinite; } #venus { margin: 0 0 0 81px; width: 8px; height: 8px; background-color: #C49300; animation: turn 12.4s linear infinite; } .orbit-3 { margin: -95px 0 0 -95px; width: 190px; height: 190px; animation: orbit 20s linear infinite; } #earth { margin: 0 0 0 91px; width: 8px; height: 8px; background-color: #0099CC; animation:turn 20s linear infinite; } .orbit-4 { margin: -105px 0 0 -105px; width: 210px; height: 210px; animation: orbit 37.6s linear infinite; } #mars { margin: 0 0 0 103px; width: 5px; height: 5px; background-color: #CC3300; animation: turn 37.6s linear infinite; } .orbit-5 { border: 0px dotted #666666; margin: -150px 0 0 -150px; width: 300px; height: 300px; box-shadow: -5px 0 70px 0px #555555, 5px 0 70px 0 #666666 inset; animation: orbit 40s linear infinite; } .orbit-6 { margin: -220px 0 0 -220px; width: 440px; height: 440px; animation: orbit 237s linear infinite; } #jupiter { margin: 0 0 0 -264px; width: 88px; height:88px; background: #f3e2c7; background: -moz-linear-gradient(top, #f3e2c7 0%, #bf8e44 12%, #b56e03 27%, #c19e67 50%, #b68d4c 58%, #b56e03 72%, #bf8e44 86%, #e9d4b3 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f3e2c7), color-stop(12%,#bf8e44), color-stop(27%,#b56e03), color-stop(50%,#c19e67), color-stop(58%,#b68d4c), color-stop(72%,#b56e03), color-stop(86%,#bf8e44), color-stop(100%,#e9d4b3)); background: -webkit-linear-gradient(top, #f3e2c7 0%,#bf8e44 12%,#b56e03 27%,#c19e67 50%,#b68d4c 58%,#b56e03 72%,#bf8e44 86%,#e9d4b3 100%); background: -o-linear-gradient(top, #f3e2c7 0%,#bf8e44 12%,#b56e03 27%,#c19e67 50%,#b68d4c 58%,#b56e03 72%,#bf8e44 86%,#e9d4b3 100%); background: -ms-linear-gradient(top, #f3e2c7 0%,#bf8e44 12%,#b56e03 27%,#c19e67 50%,#b68d4c 58%,#b56e03 72%,#bf8e44 86%,#e9d4b3 100%); background: linear-gradient(to bottom, #f3e2c7 0%,#bf8e44 12%,#b56e03 27%,#c19e67 50%,#b68d4c 58%,#b56e03 72%,#bf8e44 86%,#e9d4b3 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f3e2c7', endColorstr='#e9d4b3',GradientType=0 ); animation: turn 237s linear infinite; } .orbit-7 { margin: -355px 0 0 -355px; width: 710px; height: 710px; animation: orbit 589s linear infinite; } #saturn { margin: 0 0 0 -393px; width: 75px; height:75px; background: #d5cea6; background: -moz-linear-gradient(top, #d5cea6 0%, #cea902 10%, #d3c470 22%, #c9c190 38%, #d1b423 60%, #cea902 71%, #d5cea6 81%, #d1b423 94%, #b7ad70 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#d5cea6), color-stop(10%,#cea902), color-stop(22%,#d3c470), color-stop(38%,#c9c190), color-stop(60%,#d1b423), color-stop(71%,#cea902), color-stop(81%,#d5cea6), color-stop(94%,#d1b423), color-stop(100%,#b7ad70)); background: -webkit-linear-gradient(top, #d5cea6 0%,#cea902 10%,#d3c470 22%,#c9c190 38%,#d1b423 60%,#cea902 71%,#d5cea6 81%,#d1b423 94%,#b7ad70 100%); background: -o-linear-gradient(top, #d5cea6 0%,#cea902 10%,#d3c470 22%,#c9c190 38%,#d1b423 60%,#cea902 71%,#d5cea6 81%,#d1b423 94%,#b7ad70 100%); background: -ms-linear-gradient(top, #d5cea6 0%,#cea902 10%,#d3c470 22%,#c9c190 38%,#d1b423 60%,#cea902 71%,#d5cea6 81%,#d1b423 94%,#b7ad70 100%); background: linear-gradient(to bottom, #d5cea6 0%,#cea902 10%,#d3c470 22%,#c9c190 38%,#d1b423 60%,#cea902 71%,#d5cea6 81%,#d1b423 94%,#b7ad70 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d5cea6', endColorstr='#b7ad70',GradientType=0 ); animation: turn 589s linear infinite; } .orbit-8 { margin: -455px 0 0 -455px; width: 910px; height: 910px; animation: orbit 1680s linear infinite; } #uranus { margin: 0 0 0 -470px; width: 31px; height:31px; background: #0a77d5; background: -moz-linear-gradient(top, #0a77d5 0%, #d0e4f7 15%, #d0e4f7 19%, #73b1e7 28%, #73b1e7 36%, #73b1e7 42%, #0a77d5 51%, #5da6e2 67%, #0a77d5 83%, #87bcea 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#0a77d5), color-stop(15%,#d0e4f7), color-stop(19%,#d0e4f7), color-stop(28%,#73b1e7), color-stop(36%,#73b1e7), color-stop(42%,#73b1e7), color-stop(51%,#0a77d5), color-stop(67%,#5da6e2), color-stop(83%,#0a77d5), color-stop(100%,#87bcea)); background: -webkit-linear-gradient(top, #0a77d5 0%,#d0e4f7 15%,#d0e4f7 19%,#73b1e7 28%,#73b1e7 36%,#73b1e7 42%,#0a77d5 51%,#5da6e2 67%,#0a77d5 83%,#87bcea 100%); background: -o-linear-gradient(top, #0a77d5 0%,#d0e4f7 15%,#d0e4f7 19%,#73b1e7 28%,#73b1e7 36%,#73b1e7 42%,#0a77d5 51%,#5da6e2 67%,#0a77d5 83%,#87bcea 100%); background: -ms-linear-gradient(top, #0a77d5 0%,#d0e4f7 15%,#d0e4f7 19%,#73b1e7 28%,#73b1e7 36%,#73b1e7 42%,#0a77d5 51%,#5da6e2 67%,#0a77d5 83%,#87bcea 100%); background: linear-gradient(to bottom, #0a77d5 0%,#d0e4f7 15%,#d0e4f7 19%,#73b1e7 28%,#73b1e7 36%,#73b1e7 42%,#0a77d5 51%,#5da6e2 67%,#0a77d5 83%,#87bcea 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0a77d5', endColorstr='#87bcea',GradientType=0 ); animation: turn 1680s linear infinite; } .orbit-9 { margin: -605px 0 0 -605px; width: 1210px; height: 1210px; animation: orbit 3280s linear infinite; } #neptune { margin: 0 0 0 -620px; width: 30px; height:30px; background: #0a77d5; background: -moz-linear-gradient(top, #0a77d5 0%, #86bff4 15%, #73b1e7 28%, #0a77d5 42%, #5da6e2 61%, #078e4a 83%, #87bcea 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#0a77d5), color-stop(15%,#86bff4), color-stop(28%,#73b1e7), color-stop(42%,#0a77d5), color-stop(61%,#5da6e2), color-stop(83%,#078e4a), color-stop(100%,#87bcea)); background: -webkit-linear-gradient(top, #0a77d5 0%,#86bff4 15%,#73b1e7 28%,#0a77d5 42%,#5da6e2 61%,#078e4a 83%,#87bcea 100%); background: -o-linear-gradient(top, #0a77d5 0%,#86bff4 15%,#73b1e7 28%,#0a77d5 42%,#5da6e2 61%,#078e4a 83%,#87bcea 100%); background: -ms-linear-gradient(top, #0a77d5 0%,#86bff4 15%,#73b1e7 28%,#0a77d5 42%,#5da6e2 61%,#078e4a 83%,#87bcea 100%); background: linear-gradient(to bottom, #0a77d5 0%,#86bff4 15%,#73b1e7 28%,#0a77d5 42%,#5da6e2 61%,#078e4a 83%,#87bcea 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0a77d5', endColorstr='#87bcea',GradientType=0 ); animation:turn 3280s linear infinite; } @keyframes orbit { 0% {transform: rotate( 0deg);} 50% {transform: rotate(-180deg);} 100% {transform: rotate(-360deg);} } @keyframes turn { 0% {transform: rotateZ( 0deg);} 50% {transform: rotateZ(180deg);} 100% {transform: rotateZ(360deg);} } @media only screen and (max-width: 1000px) { #ss-container { transform: scale(0.4); left: -30%;} } @media only screen and (max-width: 720px) { #ss-container { transform: scale(0.3); left: -50%;} } @media only screen and (max-width: 480px) { #ss-container { transform: scale(0.2); left: -120%;} }

A Pure CSS Solar System – with the exception of the background stars – all planets and animation is CSS generated.The scale of the planets and yearly orbits are somewhat scaled, with the exception of the Sun which should be 50% larger. The Earth year is scaled to 20 seconds.
In addition, Pluto is not included, however, the asteroid belt between Mars and Jupiter are included as a cloudy belt. This animation is best viewed on a large screen to see the smaller planets.
]]> https://thingography.com/css-solar-system/feed/ 0