How to get a Snowfall Effect in background using CSS
By Saurabh SinghIn this tutorial, I will show you how easily you can get the effect of snowfall in the background of your HTML page. I’m styling it inside a head tag in a style tag. In the body, I’m taking a div class name as a container and only styling that. This styling is known as internal styling.
Snowfall effect in CSS
For more example, you can go through the link given below:
https://www.codespeedy.com/how-to-create-heart-using-html-html5/
Here I am providing a CSS code to get the snowfall effect. You can customize it to make changes to this effect.
<!DOCTYPE html>
<html>
<head>
<style>
.container{width:100%; height:100%; position:absolute;}
.container{
background-color: black;
background-image: url('snow1.png'), url('snow2.png'), url('snow3.png');
animation: snow 20s linear infinite;
}
@keyframes snow {
0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
100% {background-position: 500px 1000px, 400px 400px, 300px 300px}
}
</style>
</head>
<body>
<div class="container"> </div>
</body>
</html>As you can see I have used three images of snowfall which are in png format here is the link you can easily download that images and use it as per your need: snowfall images
In this zip file, you will get three images. Just extract those images and use.
Here is a screenshot:
Snowfall effect in CSS
Note: Always use the dark background to see the snowfall effect properly.
Animations in CSS allows the most of HTML elements to get animated without using JavaScript. In animation lets, an element changes from one to another style. If you want to use animation is CSS, you must specify the keyframes in the animation.
As you can see above I have created a div class in the body.
<body>
<div class = "container"> </div>
</body>We can identify the div by its class name container.
Leave a Reply