How to create shooting star animation effect with CSS
How to Create a Shooting Star Animation Effect with CSS
Shooting stars appear as warm, sparkling traces of light as these small tremors flash across the cold night sky. Shooting star effects are one of the most unique background effects for dark-themed websites. Shooting star animations are a fantastic example of a loading screen that can keep your attention for a long time while other website materials load. This effect can be leveraged in page loaders and user interfaces.
In this article, we’ll discuss how to create a shooting star animation effect using CSS. To do this, we will use various CSS properties such as animate, overflow, filter, transform, nth-child, :before and :after pseudo selectors.
Steps to Follow
Here are the steps to follow to create the shooting star animation effect
Step 1 – Create a basic design for the stars using HTML. Create a section element for the sky and nine
elements for the stars.
Step 2 – To make the stars fall at a 45-degree angle, use the transform property of the section element.
Step 3 – Align the
elements to your specifications.
Step 4 – Use properties like position and padding to create rounded spheres. To make them rounded, use the border-radius property.
Step 5 – Use the :before and :after pseudo-selectors to specify before and after effects for the stars.
Step 6 – Animate the stars using the nth-child property. Specify the position of each nth-child.
Step 7 – Using @keyframes, specify the width of the star’s head and tail. Using @-webkit-keyframes, create the shooting effect.
Properties Used
We used the following CSS properties
:nth-child(n) Selector
:nth-child(n) is a CSS pseudo-class selector that matches elements based on their position within a set of siblings. It matches all elements that are the nth child of an element. ** n** can be a number, a keyword, or any formula.
Syntax
element :nth-child(n){
Css declarations;
}
The parameter “n” in the brackets represents the pattern for selecting or matching elements. It can be an even or odd function symbol.
Odd values represent odd-numbered items in a series, such as 1, 3, 5, and so on. Similarly, even values represent even-numbered items in a series, such as 2, 4, 6, and so on.
CSS Animation
CSS animation properties allow us to animate various style properties of an element over a set time interval.
@keyframes is used to specify what happens during a given animation. This is done by specifying the CSS properties for specific “frames” of the animation, with percentages ranging from 0% (the start of the animation) to 100% (the end of the animation).
Filter Properties
It enables developers to add visual effects such as opacity, blur, and saturation to HTML elements.
Syntax
filter: none | blur() | drop-shadow() | invert() | opacity() | saturate() | sepia() | url() | brightness() | contrast();
Background – This property allows us to add visual effects to the background of an HTML element.
Box-shadow – This property allows us to add shadows to HTML elements.
Transform – This property allows us to add 2D or 3D transformations to an element. It allows you to translate, rotate, scale, move, skew, and more.
Example
<!DOCTYPE html>
<html>
<head>
<title> Shooting Star Animation Effect </title>
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
overflow: hidden;
}
div{
position: absolute;
top: 0;
left: 0;
background: #000;
background-position-x: center;
background-size: cover;
width: 100%;
height: 100vh;
animation: background 68s linear infinite;
}
@keyframes background {
0%{ transform:scale(1);}
55%{ transform:scale(1.3);}
100%{ transform: scale(1);}
}
span{
position: absolute;
left: 50%;
top: 45%;
width: 5px;
height: 5px;
background: white;
border-radius: 50%;
box-shadow: 0 1px 0 5px rgba(254, 254, 255, 0.2), 0 1px 0 7px rgba(245, 254, 255, 0.1), 0 1px 21px rgba(253, 253, 245, 1);
animation: anim 3s ease-in-out infinite;
}
span::before{
content: '';
width: 290px;
height: 2px;
position: absolute;
top: 53%;
transform: translateY(-45%);
background: linear-gradient(90deg, rgba(255, 255, 255, 1), transparent);
}
@keyframes anim {
0%{ transform: rotate(325deg) translateX(0); opacity: 1; }
40%{ opacity: 0.8; }
70%{ opacity: 1; }
100%{ transform: rotate(325deg) translateX(-1400px); opacity: 0; }
}
span:nth-child(1){
top: 0;
right: 0;
left: inherit;
animation-delay: 0 ;
animation-duration: 1s;
}
span:nth-child(2){
top: 0;
right: 70px;
left: inherit;
animation-delay: 0.3s;
animation-duration: 4s;
} span:nth-child(3){
top: 70px;
right: 0px;
left: inherit;
animation-delay: 0.3s;
animation-duration: 3s;
}
span:nth-child(4){
top: 0;
right: 170px;
left: initial;
animation-delay: 0.7s;
animation-duration: 3s;
}
</style>
</head>
<body>
<div>
<span> </span>
<span> </span>
<span> </span>
<span> </span>
<span> </span>
<span> </span> </div>
</body>
</html>
Summary
In this article, we’ve seen how to create a shooting star effect using CSS. Online animation is a crucial tool website builders use to attract more viewers, and web design has significantly improved. Most people are trying to utilize it more frequently, not just to fill the page, but also to show how a page should read. Animation is used to reveal form errors, indicate clickable areas, increase conversion rates, and more.
Animations often attract users’ attention, which is why they’re used so often. Furthermore, animations can be used to divert users’ attention while content is loading, giving the impression that it’s happening faster and allowing them to immediately observe movement or progress.