At least once, you must have seen a website with particles appearing and disappearing in its background. This cool particle animation may seem complicated but it is actually quite easy to make. In this article, we will set an image as the background of our body, and on it, we will have particles moving in zig-zag motion appearing and disappearing regularly. The main concepts of CSS that will be helpful are position properties, keyframe, and transform properties.
Prerequisites:
- Basics of HTML.
- Basics of CSS.
- A nice background image.
Approach:
- Create a <div> tag that will be the container of the entire animation, thus we give it the class of container. It will have two more containers inside it, one for holding the text using one <h1> tag and one <p> tag, and the other for holding the particles using 20 <div> tags each with the class of particle.
- Give the animation container a background image, that covers all of it and is placed in the center using the background, background-repeat, background-size, and background-position properties set to url(“path_to_file”), no-repeat, cover, and center respectively.
- To keep the container from being scrollable, we set overflow to hidden.
- Make the image look a little dull by adding a layer of black transparent element over it using the before pseudo selector on the container and giving it a blank content, taking 100% width and height.
- To make this container take full-screen size, we first reset CSS by putting the margin and padding to 0%, and box-sizing to border-box. Make the body take full screen by setting the height and the width property to 100vh and 100vw respectively. Now, set the height and width properties of the animation container to 100%.
- To place elements freely on the screen ignoring the DOM hierarchy, we set the position of the text container and each particle to absolute.
- To place the text contained in the center of the screen, set the top and the left properties to 50%, then use the transform property with the translate() method to move it up and left by 50% of its own dimensions since the top and the left properties push the container based on its edges and not its center point.
- Now, we just increase the font size, give the required padding and margin, and apply some text-shadow.
- To make our 20 <div>s look like particles, we give them the same dimensions for height and width and set border-radius to 50% to make them round. We give them a background color that matches the background image, and some box shadow to make it look like it is glowing.
- We place the particles randomly on the screen, evenly distributed, selecting each one separately using the nth-child selector and setting their top and left properties. To keep it responsive, we define the units in percentages. We also define the animate property to add the particle-motion animation to each particle, each one performing infinitely, linearly, but with different durations.
- Now, define the particle-motion animation using the @keyframes keyword. We use to change values based on stages of completion. We simply make them move zig-zag while moving upward, by giving positive and negative values of x and only the negative value of y in the translate() method of transform property. As the animation progresses, we also decrease the opacity.
Implementation: Below is the implementation of the above approach:
- index.html
HTML
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible"
content="IE=edge">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>GeeksforGeeks Pure CSS Particle Animation</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="text-content">
<h1>Particle Animation</h1>
<p>
Welcome to GeeksforGeeks, in this article you
will learn to create particle animation purely
from CSS. We will not be using any CSS library.
</p>
</div>
<div class="particle-container">
<div class="particle"></div>
<div class="particle"></div>
<div class="particle"></div>
<div class="particle"></div>
<div class="particle"></div>
<div class="particle"></div>
<div class="particle"></div>
<div class="particle"></div>
<div class="particle"></div>
<div class="particle"></div>
<div class="particle"></div>
<div class="particle"></div>
<div class="particle"></div>
<div class="particle"></div>
<div class="particle"></div>
<div class="particle"></div>
<div class="particle"></div>
<div class="particle"></div>
<div class="particle"></div>
<div class="particle"></div>
</div>
</div>
</body>
</html>
|
- style.css
CSS
*{ padding: 0%;
margin: 0%;
box-sizing: border-box;
}body{ width: 100vw;
height: 100vh;
overflow-x: hidden;
}.container{ position: relative;
width: 100%;
height: 100%;
overflow: hidden;
background-color: rgb(41, 37, 37);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}.text-content{ position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 90%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
color: rgb(255, 193, 59);
text-shadow: 2px 1px 5px crimson;
font-family: Verdana, Geneva, Tahoma, sans-serif;
letter-spacing: 2px;
}.text-content h1{
font-size: 4rem;
}.text-content p{ font-size: 1.2rem;
font-style: italic;
font-weight: lighter;
width: 80%;
}.particle-container .particle{ position: absolute;
height: 10px;
width: 10px;
border-radius: 50%;
background: radial-gradient(rgb(255, 245, 153) 40%, rgb(247, 211, 51), orange, rgb(255, 81, 0));
box-shadow: 3px 5px 10px rgba(255, 255, 255, 0.514);
}.particle-container .particle:nth-child(1){
top: 12%;
left: 42%;
animation: particle-motion 1s linear infinite;
}.particle-container .particle:nth-child(2){
top: 70%;
left: 50%;
animation: particle-motion 7s linear infinite;
}.particle-container .particle:nth-child(3){
top: 17%;
left: 6%;
animation: particle-motion 9s linear infinite;
}.particle-container .particle:nth-child(4){
top: 20%;
left: 60%;
animation: particle-motion 10s linear infinite;
}.particle-container .particle:nth-child(5){
top: 67%;
left: 10%;
animation: particle-motion 6s linear infinite;
}.particle-container .particle:nth-child(6){
top: 80%;
left: 70%;
animation: particle-motion 11s linear infinite;
}.particle-container .particle:nth-child(7){
top: 60%;
left: 80%;
animation: particle-motion 6s linear infinite;
}.particle-container .particle:nth-child(8){
top: 32%;
left: 25%;
animation: particle-motion 6s linear infinite;
}.particle-container .particle:nth-child(9){
top: 90%;
left: 25%;
animation: particle-motion 9s linear infinite;
}.particle-container .particle:nth-child(10){
top: 10%;
left: 80%;
animation: particle-motion 5s linear infinite;
}.particle-container .particle:nth-child(11){
top: 24%;
left: 82%;
animation: particle-motion 10s linear infinite;
}.particle-container .particle:nth-child(12){
top: 97%;
left: 5%;
animation: particle-motion 7s linear infinite;
}.particle-container .particle:nth-child(13){
top: 97%;
left: 60%;
animation: particle-motion 9s linear infinite;
}.particle-container .particle:nth-child(14){
top: 30%;
left: 40%;
animation: particle-motion 5s linear infinite;
}.particle-container .particle:nth-child(15){
top: 47%;
left: 55%;
animation: particle-motion 7s linear infinite;
}.particle-container .particle:nth-child(16){
top: 70%;
left: 80%;
animation: particle-motion 8s linear infinite;
}.particle-container .particle:nth-child(17){
top: 40%;
left: 40%;
animation: particle-motion 10s linear infinite;
}.particle-container .particle:nth-child(18){
top: 23%;
left: 15%;
animation: particle-motion 4s linear infinite;
}.particle-container .particle:nth-child(19){
top: 90%;
left: 90%;
animation: particle-motion 3s linear infinite;
}.particle-container .particle:nth-child(20){
top: 85%;
left: 95%;
animation: particle-motion 7s linear infinite;
}@keyframes particle-motion { 0%{
transform: translate(0);
opacity: 1;
}
20%{
transform: translate(5px -20px);
opacity: 0.8;
}
40%{
transform: translate(-10px, -30px);
opacity: 0.7;
}
60%{
transform: translate(15px, -40px);
opacity: 0.5;
}
80%{
transform: translate(-20px, -60px);
opacity: 0.2;
}
100%{
transform: translate(40px, -100px);
opacity: 0;
}
} |
Output: