CSS3 animation applied red rain

effect:
image:
Complete code:
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <style>
            *{
                padding: 0;
                margin: 0;
            }
            body,html{
                height:100%;
            }
            .rightmenu{
                width:18%;
                height: 95%;
                float:left;
            }
            .rightmenu textarea{
                width:100%;
                height: 100%;
                line-height: 25px;
                font-size: 16px;
                padding-top:20px;
                padding-left:20px;
            }
            .content{
                width:80%;
                position:relative;
                height:100%;
                background:#f2f2f2;
                float:left;
            }
            .content .yudi{
                position:absolute;
                opacity: 0;
                animation: drops 1.5s linear;
                
                /*红包样式*/
                width:60px;
                height:72px;
                background: url(img/redpacket.png);
                /*落雨样式*/
                /*width:4px;
                height: 6px;
                background: #666;
                clip-path: ellipse(10% 30% at 50% 50%);
                animation: drops 2s cubic-bezier(0.54, 0, 0.26, 0.69) infinite;*/
                
            }
            @keyframes drops{
                0%{
                    opacity: 0;
                }
                20%{
                    opacity: 1;
                }
                90%{
                    Opacity : . 1 ; 
                } 
                100% { 
                    Opacity : 0 ; 
                    Transform : translate3d (10px, 80vh, -10px) ;   / * VH: with respect to the height of the viewport. Viewport is divided into units of 100 * VH /
                 } 
            } 
        </ style > 
        < title > </ title > 
    </ head > 
    < body > 
        < div class = "Content" > 
        </ div > 
        < div class= "rightmenu" > 
            < TextArea > </ TextArea > 
        </ div > 
    </ body > 
    < Script the src = "JS / jquery.min.js" > </ Script > 
    < Script > 
        var moneysum = 0 ; // grab total red 
        var redcount = 0 ; // red count 
        var redpacketall = 40 ; // Number of red 
        var infohtml = "" ;// grab the red record
        var $ Content = $ ( ' .content ' );
         for ( var I = 0 ; I < redpacketall; I ++ ) {
             var Lefts = Math.floor (Math.random () * 95 );
             var Tops = Math.floor (Math.random () * . 5 + 2 );
             var Delay = Math.floor (Math.random () * 100 ); random time within 10 seconds @
             var $ div =$('<div/>').addClass('yudi').css({
                "left":lefts+"%",
                "top":tops+"%",
                "animation-delay":delay/10+"s"
            });
            $content.append($div);
        }
        $('.content .yudi').on('click',function() {
             Var Money = Math.floor (Math.random () * 10 ); // create random red envelopes 
            $ ( the this ) .hide (); 
            redcount + = 1 ; 
            moneysum + = Money; 
            infohtml + = " Congratulations on your the " + Money + " red envelopes \ n- " ; 
            $ ( ' .rightmenu TextArea ' ) .val (infohtml); 
            activitieend (); 
        }) 

        $ ( ' .content .yudi ') .on ( " the animationEnd " , function () { // Animation listener end 
            redcount + = . 1 ; 
            activitieend (); 
            
        }) 
        
        function activitieend () // When the counter reaches the total number of red, end of the event 
        { 
            IF (redcount == redpacketall ) 
            { 
                infohtml + = " red total: " + moneysum + " element " ; 
                $ ( ' .rightmenu TextArea ' ) .val (infohtml); 
                Alert (" End of the event, Congratulations on your " + moneysum + " red envelopes " ); 
            } 
        } 
    </ Script > 
</ HTML >
CSS3 animation applied red rain

Guess you like
