Skip to content
Related Articles

Related Articles

CSS Rain and lightning effect
  • Difficulty Level : Medium
  • Last Updated : 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(
                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(
                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:




My Personal Notes arrow_drop_up
Recommended Articles
Page :