Hello guys in this tutorial we will create animated stars with realistic moon using HTML CSS and JavaScript
First we need to create two files index.html and style.css then we need to do code for it.
Step:1
Add below code inside index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Stars</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta https-equiv="X-UA-Compatible" content="ie=edge" />
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="moon_outer">
<div class="moon">
<div class="details"></div>
<div class="details one"></div>
<div class="details two"></div>
<div class="details three"></div>
<div class="details four small"></div>
</div>
</div>
<section id="stars"></section>
<script type="text/javascript">
function stars() {
const count = 300;
const stars = document.getElementById('stars');
var i = 0;
while(i < count) {
const star = document.createElement('i');
const x = Math.floor(Math.random() * window.innerWidth)
const y = Math.floor(Math.random() * window.innerHeight)
const size = Math.random() * 5;
star.style.left = x+'px';
star.style.top = y+'px';
star.style.height = 1+size+'px';
star.style.width = 1+size+'px';
const duration = Math.random() * 2;
star.style.animationDuration = 2+duration+'s';
stars.appendChild(star);
i++
}
}
stars();
</script>
</body>
</html>
Step:2
Then we need to add code for style.css which code i provide in below screen.
* {
padding: 0;
margin: 0;
}
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: radial-gradient(ellipse at bottom, #0d1d31 0%, #0c0d13 100%);
overflow: hidden;
}
.moon {
width: 100px;
height:100px;
border-radius: 50%;
animation: shine 2s ease-in-out infinite;
background-color: rgb(230, 224, 224);
box-shadow: 0px 0px 8px 2px rgba(235, 235, 231, 0.301);
position: relative;
overflow: hidden;
}
.details {
width: 100px;
height:100px;
border-radius: 50%;
background-color: rgba(165, 165, 165, 0.089);
}
.details.one {
position: absolute;
top: 20px;
left: 40px;
width: 20px;
height: 20px;
border-radius: 50%;
background-color: transparent;
box-shadow: inset 2px 0 4px rgba(167, 167, 167, 0.685);
}
.details.two {
position: absolute;
top: 60px;
left: 16px;
width: 20px;
height: 20px;
border-radius: 50%;
background-color: transparent;
box-shadow: inset -2px 0 4px rgba(167, 167, 167, 0.685);
}
.details.three {
position: absolute;
top: 70px;
left: 70px;
width: 20px;
height: 20px;
border-radius: 50%;
background-color: transparent;
box-shadow: inset 2px 0 4px rgba(167, 167, 167, 0.685);
}
.details.four.small {
position: absolute;
top: 40px;
left: 60px;
width: 10px;
height: 10px;
border-radius: 50%;
background-color: transparent;
box-shadow: inset 2px 0 4px rgba(167, 167, 167, 0.585);
}
#stars > i {
position: absolute;
background: #fff;
border-radius: 50%;
box-shadow: 0 0 5px #fff,
0 0 15px #fff,
0 0 25px #fff;
animation: animate linear infinite;
}
.moon_outer {
position: absolute;
left: 20px;
top: 20px;
z-index: 1;
}
@keyframes animate {
0% {
opacity: 0;
}
25% {
opacity: 1;
}
50% {
opacity: 1;
}
95% {
opacity: 1;
}
100% {
opacity: 0;
}
}