Solar system animation by CSS3
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
html, body {background:#000;}
.solarsystem {width:800px; height:800px; margin:5% auto;/* border: solid 2px #66a5da;*/ position:relative;}
.sun { background:-webkit-gradient(linear, left top, right top, color-stop(39%,#fff132), color-stop(100%,#e5c824));-webkit-box-shadow: 1px 0px 50px #ffe042;width:50px; height:50px; border-radius:50px;}
.mercury { background:-webkit-gradient(linear, left top, right top, color-stop(39%,#e79f04), color-stop(100%,#d28f00));/*-webkit-box-shadow: 1px 0px 2px #ffe042;*/width:10px; height:10px; border-radius:10px; margin-left:18px; }
.venus { background:-webkit-gradient(linear, left top, right top, color-stop(39%,#c79f4a), color-stop(100%,#a38036));/*-webkit-box-shadow: 1px 0px 1px #ffe042;*/ width:15px; height:15px; border-radius:15px; margin-left:35px; }
.earth { background:#30a0ff;/*-webkit-box-shadow: 1px 0px 1px #ffe042;*/ width:20px; height:20px; border-radius:20px; margin-left:60px; }
.moon { background:#fff;/*-webkit-box-shadow: 1px 0px 1px #ffe042;*/ width:6px; height:6px; border-radius:6px; }
.mars { background:-webkit-gradient(linear, left top, right top, color-stop(39%,#c35214), color-stop(100%,#ad3f03));/*-webkit-box-shadow: 1px 0px 5px #c35214;*/width:19px; height:19px; border-radius:19px; margin-left:80px; }
.astoriods { background:url(../images/astorieds.png) no-repeat; width:368px; height:368px; position:absolute; top:220px; left:215px;}
.jupiter { background:-webkit-gradient(linear, left top, right top, color-stop(39%,#e79f04), color-stop(100%,#d28f00));/*-webkit-box-shadow: 1px 0px 2px #ffe042;*/width:28px; height:28px; border-radius:28px; margin-left:95px; }
.saturn { background: url(../images/saturn.png) no-repeat; width:40px; height:40px; margin-left:100px;}
.uranus { background:-webkit-gradient(linear, left top, right top, color-stop(39%,#62b7ff), color-stop(100%,#319ffd));/*-webkit-box-shadow: 1px 0px 2px #ffe042;*/width:18px; height:18px; border-radius:18px; margin-left:155px;}
.pluto { background:-webkit-gradient(linear, left top, right top, color-stop(39%,#6b8ca8), color-stop(100%,#8dafcb));/*-webkit-box-shadow: 1px 0px 2px #ffe042;*/width:8px; height:8px; border-radius:8px; margin-left:208px;}
.sun_position { position:absolute; top:375px; left:375px;}
.mercury_orbit { width:100px; height:100px; border: solid 2px #66a5da; position:absolute; top:350px; left:350px; border-radius:160px; -webkit-animation-name:rotate; -webkit-animation-duration:8s; -webkit-animation-iteration-count:infinite; -webkit-animation-timing-function:linear;}
.venus_orbit { width:160px; height:160px; border: solid 2px #66a5da; position:absolute; top:320px; left:320px; border-radius:100px; -webkit-animation-name:rotate; -webkit-animation-duration:20s; -webkit-animation-iteration-count:infinite; -webkit-animation-timing-function:linear;}
.earth_orbit { width:240px; height:240px; border: solid 2px #66a5da; position:absolute; top:280px; left:280px; border-radius:240px; -webkit-animation-name:rotate; -webkit-animation-duration:25s; -webkit-animation-iteration-count:infinite; -webkit-animation-timing-function:linear;}
.moon_orbit {width:30px; height:30px; border-radius:30px; position:absolute; margin-top:-5px; margin-left:-5px; -webkit-animation-name:rotate; -webkit-animation-duration:2s; -webkit-animation-iteration-count:infinite; -webkit-animation-timing-function:linear;}
.mars_orbit {width:300px; height:300px; border-radius:300px; position:absolute; top:250px; left:250px; border: solid 2px #66a5da; -webkit-animation-name:rotate; -webkit-animation-duration:22s; -webkit-animation-iteration-count:infinite; -webkit-animation-timing-function:linear;}
.jupiter_orbit {width:360px; height:360px; border-radius:360px; position:absolute; top:220px; left:220px; border: solid 2px #66a5da; -webkit-animation-name:rotate; -webkit-animation-duration:35s; -webkit-animation-iteration-count:infinite; -webkit-animation-timing-function:linear;}
.astoriods.animate { -webkit-animation-name:rotate; -webkit-animation-duration:100s; -webkit-animation-iteration-count:infinite; -webkit-animation-timing-function:linear;}
.saturn_orbit {width:420px; height:420px; border-radius:420px; position:absolute; top:190px; left:190px; border: solid 2px #66a5da; -webkit-animation-name:rotate; -webkit-animation-duration:25s; -webkit-animation-iteration-count:infinite; -webkit-animation-timing-function:linear;}
.uranus_orbit {width:480px; height:480px; border-radius:480px; position:absolute; top:160px; left:160px; border: solid 2px #66a5da; -webkit-animation-name:rotate; -webkit-animation-duration:55s; -webkit-animation-iteration-count:infinite; -webkit-animation-timing-function:linear;}
.pluto_orbit {width:540px; height:540px; border-radius:540px; position:absolute; top:130px; left:130px; border: solid 2px #66a5da; -webkit-animation-name:rotate; -webkit-animation-duration:70s; -webkit-animation-iteration-count:infinite; -webkit-animation-timing-function:linear;}
@-webkit-keyframes rotate {from { -webkit-transform:rotate(0deg) } to { -webkit-transform:rotate(360deg) }}
</style>
</head>
<body>
<div class="solarsystem">
<div class="sun sun_position"></div>
<div class="mercury_orbit">
<div class="mercury"></div>
</div>
<div class="venus_orbit">
<div class="venus"></div>
</div>
<div class="earth_orbit">
<div class="earth">
<div class="moon_orbit">
<div class="moon"></div>
</div>
</div>
</div>
<div class="mars_orbit">
<div class="mars"></div>
</div>
<div class="astoriods animate"></div>
<div class="jupiter_orbit">
<div class="jupiter"></div>
</div>
<div class="saturn_orbit">
<div class="saturn"></div>
</div>
<div class="uranus_orbit">
<div class="uranus"></div>
</div>
<div class="pluto_orbit">
<div class="pluto"></div>
</div>
</div>
</body>
</html>
No comments:
Post a Comment