How to create Shooting Star Animation Effect using CSS ?
Last Updated :
09 May, 2023
The Shooting Star effect is one of the coolest background effects that is used for dark-themed websites. Shooting Stars Animation is an extraordinary illustration of a loading screen that grabs your eye for a considerable length of time for the remainder of the content to load on the website. This effect can be used in page loader, UI.
Approach: The methodology is to make little roundabouts and align their motion in 45 degrees using CSS properties like webkit-transform and transform and afterward adding animations for the tail of star and head of the star(shining part) using @keyframes and @-webkit-keyframes property and now add delays for shooting effects. Essential information on these three properties is essential for going any further in this article.
Example: In this example, we are using the above-explained approach, first we create a basic design of the web page.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Shooting Star Animation</title>
</head>
<body>
<div class="sky">
<!-- We are making divisions, every div.
represent a single roundabout balls -->
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
</div>
</body>
</html>
CSS Code: For CSS, follow the given below steps:
- Align the division components as per your requirement.
- Give them a circular shape using the border-radius property.
- Use keyframes to animate the balls by increasing the scale. There is no fixed way of doing this you can change the scale on different frames as you like.
- Use n-th child property to apply some delay between the animation of each element.
CSS
body {
height: 100vh;
overflow: hidden;
opacity: 0.5;
background-color: black;
display: -webkit-box;
display: flex;
}
/* Here using -webkit, we make angle
of 45 degree of falling star */
.sky {
position: relative;
width: 100%;
height: 100%;
-webkit-transform: rotateZ(45deg);
transform: rotateZ(45deg);
}
/* Here we are making roundabout balls */
.star {
position: absolute;
left: 50%;
top: 50%;
height: 2px;
border-radius: 885px;
background: linear-gradient(-45deg,
#eef0f5, rgba(0, 0, 255, 0));
-webkit-filter: drop-shadow(0 0 6px #eef1f8);
filter: drop-shadow(0 0 6px #d7dff0);
-webkit-animation: tail 3000ms ease-in-out infinite,
shooting 3000ms ease-in-out infinite;
animation: tail 3000ms ease-in-out infinite,
shooting 3000ms ease-in-out infinite;
}
/* Here we add before and after effect to star */
.star::before,
.star::after {
content: "";
position: absolute;
top: calc(50% - 1px);
right: 0;
height: 2px;
background: linear-gradient(-45deg,
rgba(0, 0, 255, 0),
#eaeef8,
rgba(0, 0, 255, 0));
-webkit-transform: translateX(50%) rotateZ(45deg);
transform: translateX(50%) rotateZ(45deg);
border-radius: 100%;
-webkit-animation: shining 3000ms ease-in-out infinite;
animation: shining 3000ms ease-in-out infinite;
}
.star::after {
-webkit-transform: translateX(50%) rotateZ(-45deg);
transform: translateX(50%) rotateZ(-45deg);
}
/* Here we are adding location of each
nth-child, animations, delays, and
before and after effects to each
and every balls(stars) */
.star:nth-child(1) {
top: calc(50% - -119px);
left: calc(50% - 43px);
-webkit-animation-delay: 4000ms;
animation-delay: 4000ms;
}
.star:nth-child(1)::before,
.star:nth-child(1)::after {
-webkit-animation-delay: 4000ms;
animation-delay: 4000ms;
}
.star:nth-child(2) {
top: calc(50% - -43px);
left: calc(50% - 37px);
-webkit-animation-delay: 5000ms;
animation-delay: 5000ms;
}
.star:nth-child(2)::before,
.star:nth-child(2)::after {
-webkit-animation-delay: 5000ms;
animation-delay: 5000ms;
}
.star:nth-child(3) {
top: calc(50% - -40px);
left: calc(50% - 222px);
-webkit-animation-delay: 7000ms;
animation-delay: 7000ms;
}
.star:nth-child(3)::before,
.star:nth-child(3)::after {
-webkit-animation-delay: 7000ms;
animation-delay: 7000ms;
}
.star:nth-child(4) {
top: calc(50% - -29px);
left: calc(50% - 113px);
-webkit-animation-delay: 7000ms;
animation-delay: 7000ms;
}
.star:nth-child(4)::before,
.star:nth-child(4)::after {
-webkit-animation-delay: 7000ms;
animation-delay: 7000ms;
}
.star:nth-child(5) {
top: calc(50% - 146px);
left: calc(50% - 112px);
-webkit-animation-delay: 3000ms;
animation-delay: 3000ms;
}
.star:nth-child(5)::before,
.star:nth-child(5)::after {
-webkit-animation-delay: 3000ms;
animation-delay: 3000ms;
}
.star:nth-child(6) {
top: calc(50% - -108px);
left: calc(50% - 160px);
-webkit-animation-delay: 3000ms;
animation-delay: 3000ms;
}
.star:nth-child(6)::before,
.star:nth-child(6)::after {
-webkit-animation-delay: 3000ms;
animation-delay: 3000ms;
}
.star:nth-child(7) {
top: calc(50% - 52px);
left: calc(50% - 72px);
-webkit-animation-delay: 7000ms;
animation-delay: 7000ms;
}
.star:nth-child(7)::before,
.star:nth-child(7)::after {
-webkit-animation-delay: 7000ms;
animation-delay: 7000ms;
}
/* This code will help to generate
effect in tail of star */
@keyframes tail {
0% {
width: 0;
}
30% {
width: 100px;
}
100% {
width: 0;
}
}
/* This code will generate shining
effect in head of star */
@keyframes shining {
0% {
width: 0;
}
50% {
width: 30px;
}
100% {
width: 0;
}
}
/* Here we are adding webkit-animation
to head of star for shining */
@-webkit-keyframes shining {
0% {
width: 0;
}
50% {
width: 30px;
}
100% {
width: 0;
}
}
/* Here we are adding webkit-animation
to tail of star */
@-webkit-keyframes tail {
0% {
width: 0;
}
30% {
width: 100px;
}
100% {
width: 0;
}
}
/* Here we are adding webkit-animation
for shooting effect */
@-webkit-keyframes shooting {
0% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
100% {
-webkit-transform: translateX(270px);
transform: translateX(270px);
}
}
/* Here we make shooting effect */
@keyframes shooting {
0% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
100% {
-webkit-transform: translateX(270px);
transform: translateX(270px);
}
}
After combining the above two sections of code i.e. HTML and CSS code to get the desired output.
Output:Â
Similar Reads
How to Create Jumping Text 3D Animation Effect using CSS ? In this article, you will learn to implement Jumping Texts animation effect using simple HTML and CSS. HTML is used to create the structure of the page and CSS is used to set the styling. HTML Code: In this section, we will design the basic structure of the body. html <!DOCTYPE html> <html
4 min read
How to create Incoming Call Animation Effect using CSS ? In this article, we will learn how to create an incoming call animation effect, by using CSS. Approach: To create this effect, we essentially need to animate the shadow effects around the element frame, which can be easily manipulated using the CSS box-shadow property. It is described by X and Y off
2 min read
How to Create Circle Loading Animation Effect using CSS ? In this article, we will see how to create a circle-loading animation using HTML and CSS, along with understanding its basic implementation through the example. Generally, Loading Animation is utilized to wait for the content to be fully loaded on the webpage. If some pages don't contain the loader,
6 min read
How to Create Text Changing Animation Effect using CSS ? A CSS text-changing animation effect involves dynamically altering displayed text, typically through transitions or keyframe animations. This effect can smoothly switch between words or phrases, enhancing visual engagement. It’s achieved using CSS properties like animation, transition, and keyframes
2 min read
Create Effect of Particle Animation using CSS At least once, you must have seen a website with particles appearing and disappearing in its background. This cool particle animation may seem complicated but it is actually quite easy to make. In this article, we will set an image as the background of our body, and on it, we will have particles mov
6 min read