{"id":2115,"date":"2018-03-18T17:15:48","date_gmt":"2018-03-18T17:15:48","guid":{"rendered":"http:\/\/thingography.com\/?p=2115"},"modified":"2025-02-13T20:56:53","modified_gmt":"2025-02-13T20:56:53","slug":"css-solar-system","status":"publish","type":"post","link":"https:\/\/thingography.com\/css-solar-system\/","title":{"rendered":"Pure CSS Solar System Orbits Animation"},"content":{"rendered":"<style>\n.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;}\n#ss-container {\n\tmargin: -260px auto 0px auto;\n\twidth: 1220px;\n\theight: 1220px;\n\tposition: relative;\n\ttransform: scale(0.6);\n}\n#sol, #mercury, #mars, #earth, #venus, #asteroid, #jupiter, #saturn, #uranus, #neptune {\n\tleft: 50%;\n\ttop: 50%;\n\tposition: absolute;\n\tborder: 1px solid #000000;\n\tborder-radius: 50%;\n}\n#sol {\n\tmargin: -50px 0 0 -50px;\n\twidth: 100px;\n\theight: 100px;\n\tborder: 0 solid #FFFF00;\n\tbackground: #fefcea;\n\tbackground: -moz-radial-gradient(center, ellipse cover,  #fefcea 0%, #f1da36 100%);\n\tbackground: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#fefcea), color-stop(100%,#f1da36)); \n\tbackground: -webkit-radial-gradient(center, ellipse cover,  #fefcea 0%,#f1da36 100%);\n\tbackground: -o-radial-gradient(center, ellipse cover,  #fefcea 0%,#f1da36 100%);\n\tbackground: -ms-radial-gradient(center, ellipse cover,  #fefcea 0%,#f1da36 100%);\n\tbackground: radial-gradient(ellipse at center,  #fefcea 0%,#f1da36 100%);\n\tfilter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fefcea', endColorstr='#f1da36',GradientType=1 ); \n\tbox-shadow: 0 0 30px 10px #FFFF00;\n}\n.orbit-1, .orbit-2, .orbit-3, .orbit-4, .orbit-5, .orbit-6, .orbit-7, .orbit-8, .orbit-9 {\n\tborder: .08em solid #555555;\n\tborder-radius: 50%;\n\tposition: absolute;\n\ttop: 50%;\n\tleft: 50%;\n}\n.orbit-1 {\n\tmargin: -75px 0 0 -75px;\n\twidth: 150px;\n\theight: 150px;\n\tanimation:orbit 4.8s linear infinite;\n}\n#mercury {\n\tmargin: 0 0 0 73.5px;\n\twidth: 3px;\n\theight: 3px;\n\tbackground-color: #FFF;\n\tanimation: turn 4.8s linear infinite;\n}\n.orbit-2 {\n\tmargin: -85px 0 0 -85px;\n\twidth: 170px;\n\theight: 170px;\n\tanimation: orbit 12.4s linear infinite;\n}\n#venus {\n\tmargin: 0 0 0 81px;\n\twidth: 8px;\n\theight: 8px;\n\tbackground-color: #C49300;\n\tanimation: turn 12.4s linear infinite;\n}\n.orbit-3 {\n\tmargin: -95px 0 0 -95px;\n\twidth: 190px;\n\theight: 190px;\n\tanimation: orbit 20s linear infinite;\n}\n#earth {\n\tmargin: 0 0 0 91px;\n\twidth: 8px;\n\theight: 8px;\n\tbackground-color: #0099CC;\n\tanimation:turn 20s linear infinite;\n}\n.orbit-4 {\n\tmargin: -105px 0 0 -105px;\n\twidth: 210px;\n\theight: 210px;\n\tanimation: orbit 37.6s linear infinite;\n}\n#mars {\n\tmargin: 0 0 0 103px;\n\twidth: 5px;\n\theight: 5px;\n\tbackground-color: #CC3300;\n\tanimation: turn 37.6s linear infinite;\n}\n.orbit-5 {\n\tborder: 0px dotted #666666;\n\tmargin: -150px 0 0 -150px;\n\twidth: 300px;\n\theight: 300px;\n\tbox-shadow: -5px 0 70px 0px #555555, 5px 0 70px 0 #666666 inset;\n\tanimation: orbit 40s linear infinite;\n}\n.orbit-6 {\n\tmargin: -220px 0 0 -220px;\n\twidth: 440px;\n\theight: 440px;\n\tanimation: orbit 237s linear infinite;\n}\n#jupiter {\n\tmargin: 0 0 0 -264px;\n\twidth: 88px;\n\theight:88px;\n\tbackground: #f3e2c7; \n\tbackground: -moz-linear-gradient(top,  #f3e2c7 0%, #bf8e44 12%, #b56e03 27%, #c19e67 50%, #b68d4c 58%, #b56e03 72%, #bf8e44 86%, #e9d4b3 100%); \n\tbackground: -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)); \n\tbackground: -webkit-linear-gradient(top,  #f3e2c7 0%,#bf8e44 12%,#b56e03 27%,#c19e67 50%,#b68d4c 58%,#b56e03 72%,#bf8e44 86%,#e9d4b3 100%); \n\tbackground: -o-linear-gradient(top,  #f3e2c7 0%,#bf8e44 12%,#b56e03 27%,#c19e67 50%,#b68d4c 58%,#b56e03 72%,#bf8e44 86%,#e9d4b3 100%); \n\tbackground: -ms-linear-gradient(top,  #f3e2c7 0%,#bf8e44 12%,#b56e03 27%,#c19e67 50%,#b68d4c 58%,#b56e03 72%,#bf8e44 86%,#e9d4b3 100%);\n\tbackground: linear-gradient(to bottom,  #f3e2c7 0%,#bf8e44 12%,#b56e03 27%,#c19e67 50%,#b68d4c 58%,#b56e03 72%,#bf8e44 86%,#e9d4b3 100%); \n\tfilter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f3e2c7', endColorstr='#e9d4b3',GradientType=0 ); \n\tanimation: turn 237s linear infinite;\n}\n.orbit-7 {\n\tmargin: -355px 0 0 -355px;\n\twidth: 710px;\n\theight: 710px;\n\tanimation: orbit 589s linear infinite;\n}\n#saturn {\n\tmargin: 0 0 0 -393px;\n\twidth: 75px;\n\theight:75px;\n\tbackground: #d5cea6; \n\tbackground: -moz-linear-gradient(top,  #d5cea6 0%, #cea902 10%, #d3c470 22%, #c9c190 38%, #d1b423 60%, #cea902 71%, #d5cea6 81%, #d1b423 94%, #b7ad70 100%); \n\tbackground: -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));\n\tbackground: -webkit-linear-gradient(top,  #d5cea6 0%,#cea902 10%,#d3c470 22%,#c9c190 38%,#d1b423 60%,#cea902 71%,#d5cea6 81%,#d1b423 94%,#b7ad70 100%);\n\tbackground: -o-linear-gradient(top,  #d5cea6 0%,#cea902 10%,#d3c470 22%,#c9c190 38%,#d1b423 60%,#cea902 71%,#d5cea6 81%,#d1b423 94%,#b7ad70 100%); \n\tbackground: -ms-linear-gradient(top,  #d5cea6 0%,#cea902 10%,#d3c470 22%,#c9c190 38%,#d1b423 60%,#cea902 71%,#d5cea6 81%,#d1b423 94%,#b7ad70 100%); \n\tbackground: linear-gradient(to bottom,  #d5cea6 0%,#cea902 10%,#d3c470 22%,#c9c190 38%,#d1b423 60%,#cea902 71%,#d5cea6 81%,#d1b423 94%,#b7ad70 100%); \n\tfilter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d5cea6', endColorstr='#b7ad70',GradientType=0 );\n\tanimation: turn 589s linear infinite;\n}\n.orbit-8 {\n\tmargin: -455px 0 0 -455px;\n\twidth: 910px;\n\theight: 910px;\n\tanimation: orbit 1680s linear infinite;\n}\n#uranus {\n\tmargin: 0 0 0 -470px;\n\twidth: 31px;\n\theight:31px;\n\tbackground: #0a77d5; \n\tbackground: -moz-linear-gradient(top,  #0a77d5 0%, #d0e4f7 15%, #d0e4f7 19%, #73b1e7 28%, #73b1e7 36%, #73b1e7 42%, #0a77d5 51%, #5da6e2 67%, #0a77d5 83%, #87bcea 100%);\n\tbackground: -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)); \n\tbackground: -webkit-linear-gradient(top,  #0a77d5 0%,#d0e4f7 15%,#d0e4f7 19%,#73b1e7 28%,#73b1e7 36%,#73b1e7 42%,#0a77d5 51%,#5da6e2 67%,#0a77d5 83%,#87bcea 100%); \n\tbackground: -o-linear-gradient(top,  #0a77d5 0%,#d0e4f7 15%,#d0e4f7 19%,#73b1e7 28%,#73b1e7 36%,#73b1e7 42%,#0a77d5 51%,#5da6e2 67%,#0a77d5 83%,#87bcea 100%); \n\tbackground: -ms-linear-gradient(top,  #0a77d5 0%,#d0e4f7 15%,#d0e4f7 19%,#73b1e7 28%,#73b1e7 36%,#73b1e7 42%,#0a77d5 51%,#5da6e2 67%,#0a77d5 83%,#87bcea 100%); \n\tbackground: linear-gradient(to bottom,  #0a77d5 0%,#d0e4f7 15%,#d0e4f7 19%,#73b1e7 28%,#73b1e7 36%,#73b1e7 42%,#0a77d5 51%,#5da6e2 67%,#0a77d5 83%,#87bcea 100%);\n\tfilter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0a77d5', endColorstr='#87bcea',GradientType=0 );\n\tanimation: turn 1680s linear infinite;\n}\n.orbit-9 {\n\tmargin: -605px 0 0 -605px;\n\twidth: 1210px;\n\theight: 1210px;\n\tanimation: orbit 3280s linear infinite;\n}\n#neptune {\n\tmargin: 0 0 0 -620px;\n\twidth: 30px;\n\theight:30px;\n\tbackground: #0a77d5; \n\tbackground: -moz-linear-gradient(top,  #0a77d5 0%, #86bff4 15%, #73b1e7 28%, #0a77d5 42%, #5da6e2 61%, #078e4a 83%, #87bcea 100%);\n\tbackground: -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)); \n\tbackground: -webkit-linear-gradient(top,  #0a77d5 0%,#86bff4 15%,#73b1e7 28%,#0a77d5 42%,#5da6e2 61%,#078e4a 83%,#87bcea 100%); \n\tbackground: -o-linear-gradient(top,  #0a77d5 0%,#86bff4 15%,#73b1e7 28%,#0a77d5 42%,#5da6e2 61%,#078e4a 83%,#87bcea 100%);\n\tbackground: -ms-linear-gradient(top,  #0a77d5 0%,#86bff4 15%,#73b1e7 28%,#0a77d5 42%,#5da6e2 61%,#078e4a 83%,#87bcea 100%); \n\tbackground: linear-gradient(to bottom,  #0a77d5 0%,#86bff4 15%,#73b1e7 28%,#0a77d5 42%,#5da6e2 61%,#078e4a 83%,#87bcea 100%);\n\tfilter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0a77d5', endColorstr='#87bcea',GradientType=0 ); \n\tanimation:turn 3280s linear infinite;\n}\n@keyframes orbit {\n\t0%   {transform: rotate(   0deg);}\n\t50%  {transform: rotate(-180deg);}\n\t100% {transform: rotate(-360deg);}\n}\n@keyframes turn {\n\t0%   {transform: rotateZ(  0deg);}\n\t50%  {transform: rotateZ(180deg);}\n\t100% {transform: rotateZ(360deg);}\n}\n@media only screen and (max-width: 1000px) {\n    #ss-container {\n        transform: scale(0.4);\n        left: -30%;}\n}\n@media only screen and (max-width: 720px) {\n    #ss-container {\n        transform: scale(0.3);\n        left: -50%;}\n}\n@media only screen and (max-width: 480px) {\n    #ss-container {\n        transform: scale(0.2);\n\tleft: -120%;}\n}\n<\/style>\n<div class=\"ani-box\">\n<div id=\"ss-container\">\n<div id=sol><\/div>\n<div class=\"orbit-1\">\n<div id=\"mercury\" title=\"MERCURY\"><\/div>\n<\/p><\/div>\n<div class=\"orbit-2\">\n<div id=\"venus\" title=\"VENUS\"><\/div>\n<\/p><\/div>\n<div class=\"orbit-3\">\n<div id=\"earth\" title=\"EARTH\"><\/div>\n<\/p><\/div>\n<div class=\"orbit-4\">\n<div id=\"mars\" title=\"MARS\"><\/div>\n<\/p><\/div>\n<div class=\"orbit-5\"><\/div>\n<div class=\"orbit-6\">\n<div id=\"jupiter\" title=\"JUPITER\"><\/div>\n<\/p><\/div>\n<div class=\"orbit-7\">\n<div id=\"saturn\" title=\"SATURN\"><\/div>\n<\/p><\/div>\n<div class=\"orbit-8\">\n<div id=\"uranus\" title=\"URANUS\"><\/div>\n<\/p><\/div>\n<div class=\"orbit-9\">\n<div id=\"neptune\" title=\"NEPTUNE\"><\/div>\n<\/p><\/div>\n<\/div>\n<p> <!-- SS-Container  --><\/p>\n<\/div>\n<p> <!-- Ani-box  --><\/p>\n<div class=\"below-ani\">A Pure CSS Solar System &#8211; with the exception of the background stars &#8211; 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.<br \/>\nIn 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.\n\t\t<\/div>\n","protected":false},"excerpt":{"rendered":"<p>A Pure CSS Solar System &#8211; with the exception of the background stars &#8211; 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<\/p>\n","protected":false},"author":2,"featured_media":2605,"comment_status":"closed","ping_status":"open","sticky":false,"template":"ani-post-single.php","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[6,4,5,212,16,211],"class_list":["post-2115","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-animation","tag-animation","tag-css","tag-css-animation","tag-orbits","tag-pure-css","tag-solar-system"],"_links":{"self":[{"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/posts\/2115","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/comments?post=2115"}],"version-history":[{"count":1,"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/posts\/2115\/revisions"}],"predecessor-version":[{"id":2628,"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/posts\/2115\/revisions\/2628"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/media\/2605"}],"wp:attachment":[{"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/media?parent=2115"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/categories?post=2115"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/tags?post=2115"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}