Solar System Animation Development

Job ID: 40352504

Budget: ₹12,500 – ₹37,500 INR

<html>
<head>
<title>Solar System</title>

<style>
body {
margin: 0;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background-color: black;
overflow: hidden;
}

.container {
position: relative;
width: 300px;
height: 300px;
}

.sun {
position: absolute;
top: 50%;
left: 50%;
width: 60px;
height: 60px;
background-color: yellow;
border-radius: 50%;
transform: translate(-50%, -50%);
}

.earth {
position: absolute;
width: 150px;
height: 150px;
border: 1px solid white;
border-radius: 50%;
animation: orbit 10s linear infinite;
}

.earth::before {
content: "";
position: absolute;
top: 50%;
left: 0;
width: 20px;
height: 20px;
background-color: aqua;
border-radius: 50%;
transform: translate(-50%, -50%);
}

@keyframes orbit {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
</style>
</head>

<body>
<h1 style="color:white; position:absolute; top:20px;">Solar System</h1>

<div class="container">
<div class="sun"></div>
<div class="earth"></div>
</div>

</body>
</html>

Related categories: JavaScript Animation HTML5 HTML 3D Animation Web Development 2D Animation Web Design