Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to create Shooting Star Animation effect using CSS?
Shooting stars appear to be the gleaming indications of the warmth produced as these small shivers make a blip in the frigid night sky. The Shooting Star effect is one of the most unique background effects for dark-themed websites. Shooting Stars Animation is a fantastic example of a loading screen that keeps your attention for a long time while the rest of the material on the website loads. This effect can be utilised in page loaders and user interfaces.
In this article, we will discuss about the method to create Shooting Star Animation effect using CSS. For this, we will use various properties of CSS like animations, overflow, filter, transform, n-th child property, :before and :after pseudo selectors.
Steps to be followed
Following are the steps to be followed to create shooting star animation effect –
Step 1 − Create a basic design for the stars using HTML. Create a section element for the sky and nine <p> elements for the stars.
Step 2 − For making the stars fall at 45deg direction, use transform property for the section element.
Step 3 − Align the p element according to your requirement.
Step 4 − Make roundabout balls using properties like position and filler property. For giving them circular shape, use border radius property.
Step 5 − Using :before and :after pseudo selectors, assign the before after effect for the stars
Step 6 − Using n-th child property, add animation effect to the stars. Specify the location of each n-th child.
Step 7 − Using @keyframes, specify the width for the head and tail of stars. Using @- webkit-keyframes, create the shooting effect.
Properties Used
We have used the following CSS properties −
:nth-child(n) selector
The :nth-child(n) is a CSS pseudo class selector, which is used to match the elements based on their position within a group of siblings. It matches all the elements which are the nth child. The n can be number, keyword or any formula.
Syntax
element :nth-child(n){
Css declarations;
}
The argument "n" in the parenthesis represents the pattern for selecting or matching elements. It might be an even or odd functional notation.
Odd values represent items whose place in a series is odd, such as 1, 3, 5, and so on. Similarly, even values denote items whose place in a series is even, such as 2, 4, 6, and so on.
CSS Animations
The animation property of CSS allows us to change various styling properties to an element during a certain interval of time which gives it an animating effect.
@keyframes is used to specify exactly what happens within the animation during the given time duration. This is done by stating the CSS properties for certain specific ‘frames’ during the animation, with percent from 0% (beginning of animation) to 100% (ending of animation).
Filter property
It enables the developers to add visual effects like opacity, blur and saturation to the HTML elements.
Syntax
filter: none | blur()| drop-shadow() | invert() | opacity() | saturate() | sepia() | url() | brightness()| contrast();
Background − It enables us to add visual effects in the background to the HTML elements.
Box-shadow − It enables us to add shadow to the HTML elements.
Transform − This property enables us to add 2D or 3D transformation to an element. It allows you to transform, rotate, scale, move, skew, etc., elements.
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>
Conclusion
In this article, we have seen how to create shooting star effect using CSS. Online animation is an important tool for website builders to employ to entice more viewers now that web design has significantly improved. Most people are attempting to utilize it more frequently, not just to fill the page but also to show how a page should be read. Animation is used to show form mistakes, where to click, increase conversions, and much more.
Animations frequently capture a user's attention, which is why they are used. In addition, animation may be used to divert users as content loads, giving the impression that it is happening faster and letting them observe movement or progress immediately.
2K+ Views
