CSS Rain and lightning effect - GeeksforGeeks

07 Sep, 2020
To generate the rain and lightning effect, we will make use of CSS animations that allow animation of HTML elements.
We will use @keyframes that allow the animation to gradually change from the current style to the new style at certain times then we will use the filter:hue-rotate() to give the lightning effect.
Approach:
Add a background image in the section.
To generate the rain effect add a background image of rain to the same section using section:before property of CSS.
We will create an animation for a lightening effect named color-change for 10s and infinite time.
To create a color-change animation we will use @keyframes and give the effect using property filter:hue-rotate(deg).
To create a rain effect again we will use the @keyframes property and change the position of the background image for some interval.
Example:
<!DOCTYPE html><html>    <head>        <style>            body {                margin: 0;                padding: 0;            }            /*adding background to section          and animation named color-change*/            section {                position: relative;                width: 100%;                height: 100vh;                background-image: url(https://media.geeksforgeeks.org/wp-content/uploads/20200828184536/download-200x200.png);                background-size: cover;                background-position: center;                animation: color-change 10s linear infinite;                animation-delay: 1s;            }            /*adding rain img and making opacity 0*/            section:before {                content: "";                position: absolute;                top: 0;                left: 0;                width: 100%;                height: 100%;                background-image: url(https://media.geeksforgeeks.org/wp-content/uploads/20200828184719/rain-300x300.png);                animation: rain 0.4s linear infinite;                opacity: 0;            }            /* just changing the position of image           of rain using keyframes*/            @keyframes rain {                0% {                    background-position: 0 0;                    opacity: 1;                }                  100% {                    background-position: 8% 80%;                    opacity: 1;                }            }            /* applying filter at different angle          on diffrent interval using keyframe*/            @keyframes color-change {                0% {                    filter: hue-rotate(0deg);                }                50% {                    filter: hue-rotate(0deg);                }                100% {                    filter: hue-rotate(360deg);                }            }        </style>    </head>    <body>        <section></section>    </body></html>
Output:
Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.
CSS-Misc
CSS
HTML
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Comments
Old Comments
Design a web page using HTML and CSS
Form validation using jQuery
How to set space between the flexbox ?
Search Bar using HTML, CSS and JavaScript
How to style a checkbox using CSS?
How to set the default value for an HTML <select> element ?
How to set input type date in dd-mm-yyyy format using HTML ?
Hide or show elements in HTML using display property
How to Insert Form Data into Database using PHP ?
REST API (Introduction)