Pure CSS Rainfall Effect

Pure CSS Rainfall Effect.Welcome to another tutorial of nawayuga.com. In this tutorial, I am going to show you how to make a rainfall effect using HTML and CSS. First of all, you need two images for this. One is raining png image and another for the background. You can add also the lighting effect using CSS. It easy and simple to use and modify according your desire. This tutorial perfect for beginner and intermediate. Please copy the given source code and paste into your text editor and run it in your browser.  

 

HTML

 

<!DOCTYPE html>
<html>
<head>
<title> Pure CSS Rain fall Effect</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
<section></section>
</body>
</html>

CSS

body{
    margin: 0;
    padding: 0''
}
section{
    position: relative;
    width: 100%;
    height: 100vh;
    background: url(pic.jpg);
    background-size: cover;
    animation:color-change 3s linear infinite;
}
section:before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height: 100%;
    background: url(rain.png);
    animation: rain 0.2s linear infinite;
        
}
@keyframes color-change{
    {
    0% 100%
    filter:hue-rotate(0deg);
}
    50%{
        filter:hue-rotate(360deg);
    }
}
@keyframes rain
{
    0%{
        background-position: 0 0; 
    }
    100%{
        background-position: 20% 100%;
    }
}

Leave a Comment