How to create Shooting Star Animation Effect using CSS ?
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:
Please Login to comment...