screenshots.gif

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>js实现下雨特效</title>
    <link rel="stylesheet" href="css/1.css">

    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .content {
            width: 100vw;
            height: 100vh;
            background: url(https://xn--xu0a.cn/api/dn/) center center no-repeat;
            background-size: cover;
        }

        #rainBox {
            position: fixed;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            pointer-events: none;
        }

        .rain {
            position: absolute;
            width: 2px;
            height: 50px;
            background: linear-gradient(rgba(255, 255, 255, .3), rgba(255, 255, 255, .6));
        }
    </style>

    <style type="text/css">
        @font-face {
            font-family: TencentSans;
            src: url("chrome-extension://lkjkfecdnfjopaeaibboihfkmhdjmanm/static/fonts/TencentSans.woff2");
        }
    </style>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

    <script>
        (function ($) {
            $.fn.snow = function (options) {
                var $flake = $('<div id="snowbox" />').css({
                    'position': 'absolute',
                    'z-index': '9999',
                    'top': '-50px',
                    'cursor': 'pointer'
                }).html('❄');
                var documentHeight = $(document).height();
                var documentWidth = $(document).width();

                var defaults = {
                    minSize: 10,
                    maxSize: 20,
                    newOn: 1000,
                    flakeColor: "#000"
                };

                options = $.extend({}, defaults, options);

                var interval = setInterval(function () {
                    var startPositionLeft = Math.random() * documentWidth - 100;
                    var startOpacity = 0.5 + Math.random();
                    var sizeFlake = options.minSize + Math.random() * options.maxSize;
                    var endPositionTop = documentHeight - 200;
                    var endPositionLeft = startPositionLeft - 500 + Math.random() * 500;
                    var durationFall = documentHeight * 10 + Math.random() * 5000;

                    $flake.clone().appendTo('body').css({
                        left: startPositionLeft,
                        opacity: startOpacity,
                        'font-size': sizeFlake,
                        color: options.flakeColor
                    }).animate({
                        top: endPositionTop,
                        left: endPositionLeft,
                        opacity: 0.2
                    }, durationFall, 'linear', function () {
                        $(this).remove()
                    });
                }, options.newOn);
            };
        })(jQuery);

        $(function () {
            $.fn.snow({
                minSize: 5,
                maxSize: 50,
                newOn: 300
            });
        });
    </script>
</head>

<body>
    <div class="content">
        <div id="rainBox"></div>
    </div>
</body>

</html>