前端网页落雨效果（圣诞祝福升级版）

桃扇骨 2023-07-10 11:09 8阅读 0赞

# .Html #

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <link rel="stylesheet" href="./css/rain.css">
    
    </head>
    
    <body>
    
    
    
        <div class="content" onclick="upplay()">
            
    
            <div id="yudicontent"></div>
    
            <div class="play">
            </div>
            <div2 class="plays"></div2>
    
        </div>
    
    
    </body>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
    </script>
    <script>
        let $para = $('#para')
        let $plays = $('.plays');
        let clicknum = 1;
        let $content = $('.content');
        let initNumber = 0;
        let $yudicontent = $('#yudicontent');
        for (let i = 0; i < 30; i++) { 
            let lefts = (Math.floor(Math.random() * 5 + 2));
            let delay = (Math.floor(Math.random() * 50 + 2));
            //delays += delay;
            initNumber += lefts;
            let $div = $('<div>').addClass('yudi').css({ 
                "animation-delay": `${ delay / 10}s`,
                "left": `${ initNumber}%`,
                "top": `${ lefts}%`
    
            });
            $yudicontent.append($div);
        }
        $(".content").click(function () { 
            clicknum++;
            console.log("total点击了" + clicknum + "次");
        });
        function upplay() { 
            let e = event || window.event;
            let yy = e.clientY;
            let xx = e.clientX;
            let top = yy - 80;
            let left = xx - 25;
            console.log(top);
            console.log(left);
            // let a1 = "富强";
            // let a2 = "民主";
            // let a3 = "文明";
            // let a4 = "和谐";
            //调试 console.log("？？？？？？？？？");
            if (clicknum % 4 == 1) { 
                let $tag = "<p> 圣诞快乐! </p>";
                let $div2 = $('<div2>');
                $div2.prepend($tag);
                $div2.addClass('play');
                $div2.css({  top: top, left: left });
    
                $plays.append($div2);
                //调试  console.warn("sss");
            }
            else if (clicknum % 4 == 2) { 
                let $tag = "<p> Merry Christmas!</p>";
                let $div2 = $('<div2>');
                $div2.prepend($tag);
                $div2.addClass('play');
                $div2.css({  top: top, left: left });
    
                $plays.append($div2);
            }
            else if (clicknum % 4 == 3) { 
                let $tag = "<p> メリークリスマス!</p>";
                let $div2 = $('<div2>');
                $div2.prepend($tag);
                $div2.addClass('play');
                $div2.css({  top: top, left: left });
    
                $plays.append($div2);
            }
            else if (clicknum % 4 == 0) { 
                let $tag = "<p> 聖誕快樂!</p>";
                let $div2 = $('<div2>');
                $div2.prepend($tag);
                $div2.addClass('play');
                $div2.css({  top: top, left: left });
                $plays.append($div2);
            }
    
        }
    
    
    </script>
    
    </html>

--------------------

# .CSS #

body,
    html { 
      height: 100%;
    }
    
    .content { 
      position: relative;
      height: 100%;
      background: white;
      overflow: hidden;
    }
    
    .content .yudi { 
      position: absolute;
      animation: drops 2s cubic-bezier(0.76, 0.09, 0.74, 0.43) infinite;
      opacity: 0;
      width: 70px;
      height: 60px;
      background: url(../present.jpg) no-repeat;
      background-size: auto 60px;
      z-index: 9999;
    }
    
    .yudi:hover { 
      animation-play-state: paused;
    }
    
    .play { 
      position: absolute;
      width: auto;
      height: 30px;
      font-size: 30px;
      color: red;
      opacity: 0;
      animation: plays 1s ease-in 1;
    }
    
    .Mymaiquee { 
      overflow: hidden;
      display: flex;
    }
    
    .Mymaiquee .list { 
      overflow: hidden;
      flex-shrink: 0;
    }
    
    @keyframes drops { 
      0% { 
        opacity: 0;
      }
      20% { 
        opacity: 1;
      }
      90% { 
        opacity: 1;
      }
      100% { 
        opacity: 0.5;
        transform: translate3d(0px, 120vh, 80px);
      }
    }
    
    @keyframes plays { 
      0% { 
        opacity: 0;
      }
      20% { 
        opacity: 0.6;
      }
      60% { 
        opacity: 0.3;
      }
      100% { 
        opacity: 0;
        transform: translate3d(0px, -120px, 0px);
      }
    }