<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> body{ background-color: #000; } .sun{ width: 100px; height: 100px; background-color: orange; position: absolute; left:50%; top:50%; margin-left:-50px; margin-top:-50px; border-radius: 50%; box-shadow: 0 0 30px 2px yellow; }
.earth{ width: 300px; height: 300px; position: absolute; left:50%; top:50%; margin-left:-150px; margin-top:-150px; border-radius: 50%; border: 1px solid #ccc; /*animation: rot 5s linear infinite;*/
}
.earth::after{ width: 30px; height: 30px; position: absolute; left:0%; top:50%; margin-left:-15px; margin-top:-15px; border-radius: 50%; background-color: dodgerblue; content:""; }
.moon{ width: 10px; height: 10px; background-color: #fff; border-radius: 50%; position: absolute; left:-25px; top:50%; margin-left: -5px; margin-top:-5px; transform-origin: 30px 5px; animation: rot 3s linear infinite; }
.mars{ width: 400px; height: 400px; position: absolute; left:50%; top:50%; margin-left:-200px; margin-top:-200px; border-radius: 50%; border: 1px solid #ccc;
animation: rot 8s linear infinite;
}
.mars::after{ width: 20px; height: 20px; position: absolute; left:0%; top:50%; margin-left:-10px; margin-top:-10px; border-radius: 50%; background-color: gold; content:""; }
.venus{ width: 500px; height: 500px; position: absolute; left:50%; top:50%; margin-left:-250px; margin-top:-250px; border-radius: 50%; border: 1px solid #ccc; animation: rot 10s linear infinite;
}
.venus::after{ width: 40px; height: 40px; position: absolute; left:0%; top:50%; margin-left:-20px; margin-top:-20px; border-radius: 50%; background-color: red; content:""; }
@keyframes rot { 0%{
}
100%{ transform:rotate(360deg); } } </style> </head> <body> <div class="sun"></div> <div class="earth"> <div class="moon"></div> </div> <div class="mars"></div> <div class="venus"></div> </body> </html>
