Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

How to create Shooting Star Animation Effect using CSS ?

  • Last Updated : 08 Oct, 2021

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 roundabout 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 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.

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.

HTML Code:  In this section, we will 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 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: 




My Personal Notes arrow_drop_up
Recommended Articles
Page :