How to create Shooting Star Animation Effect using CSS ? - GeeksforGeeks

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.
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: 
Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.
CSS-Advanced
CSS-Questions
CSS
HTML
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to set space between the flexbox ?
Design a web page using HTML and CSS
Form validation using jQuery
How to style a checkbox using CSS?
Search Bar using HTML, CSS and JavaScript
How to set the default value for an HTML <select> element ?
Hide or show elements in HTML using display property
How to set input type date in dd-mm-yyyy format using HTML ?
REST API (Introduction)
How to Insert Form Data into Database using PHP ?