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:

kartik

Improve

Article Tags :

How to create Shooting Star Animation Effect using CSS ?

Similar Reads

Thank You!

What kind of Experience do you want to share?