ShuvoIn this article I will show you how you can create this infinite space/galaxy zoom effect using just one sing div and pure CSS.
Okay so let's create our index.html which will only contain one single div
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<div class="main"></div>
</body>
</html>
Now lets write some basic styles in our style.css
body{
background-color: #000;
}
.main{
position: fixed;
top: 50%;
left: 50%;
height: 10px;
width: 10px;
background-color: #fff;
border-radius: 50%;
}
Now if you open it up in the browser you will see just a small circle in middle of our page.
But we don't want just one, we want a lot of them. Lets move slow and think how you can make two star/circle out on one div?
Well we can use box shadow. We know the syntax on box shadow is box-shadow: offset_form_X_axis offset_form_Y_axis blur_amount sperad_amount color so for example box-shadow: 30px 50px 3px 1px #fff
So let's try to add a box shadow to our div.
body{
background-color: #000;
}
.main{
position: fixed;
top: 50%;
left: 50%;
height: 10px;
width: 10px;
background-color: #fff;
border-radius: 50%;
box-shadow: 30px 50px 3px 1px #fff;
}
And now we have a second circle with some blur. Which is great because stars aren't supposed to be sharp circle.
We can make the star bigger by using a bigger number for our spread.
body{
background-color: #000;
}
.main{
position: fixed;
top: 50%;
left: 50%;
height: 10px;
width: 10px;
background-color: #fff;
border-radius: 50%;
box-shadow: 30px 50px 3px 20px #fff;
}
So we can use little or lot of spread to make our star smaller or bigger to give a feel that the star is near or far way.
Okay so now we lets make the start smaller 10px is too big.
body{
background-color: #000;
}
.main{
position: fixed;
top: 50%;
left: 50%;
height: 1px;
width: 1px;
background-color: #fff;
border-radius: 50%;
box-shadow: 30px 50px 3px 20px #fff;
}
And now we can barely even see the main div. But that's okay for now.
But the bigger issue is 2 star is not enough we want a lot of them.
Well guess what?
We can have multiple layer of box shadows, they just need to separated by comma.
body{
background-color: #000;
}
.main{
position: fixed;
top: 50%;
left: 50%;
height: 1px;
width: 1px;
background-color: #fff;
border-radius: 50%;
box-shadow: 30px 50px 3px 20px #fff,
-30px -70px 1px 10px #fff;
}
So just like this we have to create a lot of layer to create a lot of stars.
But doing that manually would suck so we can cheat a bit 👉👈.
We are going to use javascript to generate a string of multilayer box shadow.
This would not be completely cheating because we are only using JS to generate the CSS string.
function randomNumber(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min
}
const STAR_COUNT = 100
let result = ""
for(let i = 0; i < STAR_COUNT; i++){
result += `${randomNumber(-50, 50)}vw ${randomNumber(-50, 50)}vh ${randomNumber(0, 3)}px ${randomNumber(0, 3)}px #fff,`
}
console.log(result.substring(0, result.length - 1))
So now we can just copy the generated code and paste it in our CSS.
body{
background-color: #000;
}
.main{
position: fixed;
top: 50%;
left: 50%;
height: 1px;
width: 1px;
background-color: #fff;
border-radius: 50%;
box-shadow: -24vw -44vh 2px 2px #fff,38vw -4vh 0px 0px #fff,-20vw -48vh 1px 2px #fff,-39vw 38vh 3px 1px #fff,-42vw -11vh 0px 3px #fff,12vw 15vh 3px 3px #fff,42vw 6vh 3px 2px #fff,-8vw 9vh 0px 2px #fff,34vw -38vh 1px 0px #fff,-17vw 45vh 3px 1px #fff,22vw -36vh 3px 2px #fff,-42vw 1vh 1px 0px #fff;/*I have only kept a few layers for readability here*/
}
Finally we can add a zoom in and out animation to make it ever more cool.
body{
background-color: #000;
}
.main{
position: fixed;
top: 50%;
left: 50%;
height: 1px;
width: 1px;
background-color: #fff;
border-radius: 50%;
box-shadow: -24vw -44vh 2px 2px #fff,38vw -4vh 0px 0px #fff,-20vw -48vh 1px 2px #fff,-39vw 38vh 3px 1px #fff,-42vw -11vh 0px 3px #fff,12vw 15vh 3px 3px #fff,42vw 6vh 3px 2px #fff,-8vw 9vh 0px 2px #fff,34vw -38vh 1px 0px #fff,-17vw 45vh 3px 1px #fff,22vw -36vh 3px 2px #fff,-42vw 1vh 1px 0px #fff;
animation: zoom 10s alternate infinite;
}
@keyframes zoom {
0%{
transform: scale(1);
}
100%{
transform: scale(1.5);
}
}
Make sure you checkout my other articles and YouTube channel
Was it helpful? Support me on Patreon
