<head>
<title>Galaxy</title>
<style>
body{background-image: url("images/galaxy.jpg");background-size: 100% auto;}
.main-outer{position: absolute;height:100px;width:100px;left:calc(50% - 50px);top:calc(50% - 50px);}
.main{position: relative;}
.center{width:100px;height:100px;border-radius: 50%;position:absolute;top:0;left:0;}
.round{position:absolute;top:12px;left:12px;height:76px;width:76px;border-radius: 50%;}
.round1{position:absolute;top:20px;left:20px;height:60px;width:60px;border-radius: 50%;}
.round2{position:absolute;top:10px;left:10px;height:80px;width:80px;border-radius: 50%;}
.round3{position:absolute;top:25px;left:25px;height:50px;width:50px;border-radius: 50%;}
.round4{position:absolute;top:15px;left:15px;height:70px;width:70px;border-radius: 50%;}
.round5{position:absolute;top:27px;left:27px;height:46px;width:46px;border-radius: 50%;}
.round6{position:absolute;top:17px;left:17px;height:66px;width:66px;border-radius: 50%;}
@keyframes myOrbit {
from { transform: rotate(0deg) translateX(150px) rotate(0deg); }
to { transform: rotate(360deg) translateX(150px) rotate(-360deg); }
}
@keyframes myOrbit1 {
from { transform: rotate(0deg) translateX(200px) rotate(0deg); }
to { transform: rotate(360deg) translateX(200px) rotate(-360deg); }
}
@keyframes myOrbit2 {
from { transform: rotate(0deg) translateX(250px) rotate(0deg); }
to { transform: rotate(360deg) translateX(250px) rotate(-360deg); }
}
@keyframes myOrbit3 {
from { transform: rotate(0deg) translateX(300px) rotate(0deg); }
to { transform: rotate(360deg) translateX(300px) rotate(-360deg); }
}
@keyframes myOrbit4 {
from { transform: rotate(0deg) translateX(350px) rotate(0deg); }
to { transform: rotate(360deg) translateX(350px) rotate(-360deg); }
}
@keyframes myOrbit5 {
from { transform: rotate(0deg) translateX(400px) rotate(0deg); }
to { transform: rotate(360deg) translateX(400px) rotate(-360deg); }
}
@keyframes myOrbit6 {
from { transform: rotate(0deg) translateX(450px) rotate(0deg); }
to { transform: rotate(360deg) translateX(450px) rotate(-360deg); }
}
.round{animation: myOrbit 4s linear infinite;}
.round1{animation: myOrbit1 6s linear infinite;}
.round2{animation: myOrbit2 3s linear infinite;}
.round3{animation: myOrbit3 7s linear infinite;}
.round4{animation: myOrbit4 5s linear infinite;}
.round5{animation: myOrbit5 3.5s linear infinite;}
.round6{animation: myOrbit6 5.5s linear infinite;}
.border{border:1px dotted #111129;position:absolute;border-radius: 50%}
.b{width:300px;height:300px;top:calc(50% - 150px);left:calc(50% - 150px);}
.b1{width:400px;height:400px;top:calc(50% - 200px);left:calc(50% - 200px);}
.b2{width:500px;height:500px;top:calc(50% - 250px);left:calc(50% - 250px);}
.b3{width:600px;height:600px;top:calc(50% - 300px);left:calc(50% - 300px);}
.b4{width:700px;height:700px;top:calc(50% - 350px);left:calc(50% - 350px);}
.b5{width:800px;height:800px;top:calc(50% - 400px);left:calc(50% - 400px);}
.b6{width:900px;height:900px;top:calc(50% - 450px);left:calc(50% - 450px);}
.round img, .round1 img, .round2 img, .round3 img, .round4 img, .round5 img, .round6 img, .center img{height:auto;width:100%;}
</style>
</head>
<body>
<div class="border b"></div>
<div class="border b1"></div>
<div class="border b2"></div>
<div class="border b3"></div>
<div class="border b4"></div>
<div class="border b5"></div>
<div class="border b6"></div>
<div class="main-outer">
<div class="main">
<div class="center"><img src="images/sun.png"></div>
<div class="round">
<img src="images/mercury.png">
</div>
<div class="round1">
<img src="images/venus.png">
</div>
<div class="round2">
<img src="images/earth.png">
</div>
<div class="round3">
<img src="images/marsh.png">
</div>
<div class="round4">
<img src="images/Jupiter.png">
</div>
<div class="round5">
<img src="images/Saturn.png">
</div>
<div class="round6">
<img src="images/uranus.png">
</div>
</div>
</div>
</body>
</html>
No comments:
Post a Comment