.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.
]]>
