圣诞树下雪特效

最新推荐文章于 2022-12-31 22:38:06 发布

寒冰射手杨百亿

最新推荐文章于 2022-12-31 22:38:06 发布

阅读量1.2k

点赞数 2

分类专栏：笔记文章标签： css javascript html

原文链接：https://blog.csdn.net/stalin_/article/details/122064523?utm_medium=distribute.pc_category.none-task-blog-hot-6.nonecase&depth_1-utm_source=distribute.pc_category.none-task-blog-hot-6.nonecase

版权

笔记专栏收录该内容

11 篇文章 0 订阅

订阅专栏

整个下雪特效

在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta charset="utf-8">
    <title>下雪特效</title>
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    <script>
        (function ($) {
            $.fn.snow = function (options) {
                var $flake = $('<div id="snowbox" />').css({
                    'position': 'absolute',
                    'top': '-50px'
                }).html('&#10052;'),
                    documentHeight = $(document).height(),
                    documentWidth = $(document).width(),
                    defaults = {
                        minSize: 10, //雪花的最小尺寸
                        maxSize: 20, //雪花的最大尺寸
                        newOn: 1000, //雪花出现的频率
                        flakeColor: "#FFFFFF"
                    },
                    options = $.extend({}, defaults, options);

                var interval = setInterval(function () {
                    var startPositionLeft = Math.random() * documentWidth - 100,
                        startOpacity = 0.5 + Math.random(),
                        sizeFlake = options.minSize + Math.random() * options.maxSize,
                        endPositionTop = documentHeight - 100,
                        endPositionLeft = startPositionLeft - 100 + Math.random() * 100,
                        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({
                //Container:'.aixin',//这里是你想在哪个元素处出现雪花，这里可以是class也可以是id
                minSize: 5,		//雪花的最小尺寸
                maxSize: 50, 	//雪花的最大尺寸
                newOn: 30		//雪花出现的频率 这个数值越小雪花越多
                //content:<img src="./001_240.jpg" style="width:100%">,//这里是你想用的图片，如果不写这行代码，则默认为雪花
                //documentHeight :$(".aixin").height(),
                //documentWidth :$(".aixin").width(),
                //flakeColor	: "#ff2727"
            });
        });
    </script>
</head>

<body>
    <div class="all">
        <img src="./static/圣诞节.jpg" alt="">
        <div class="word">Wish You Merry Christmas~</div>
    </div>
</body>
<style>
    body {
        overflow: hidden;
    }

    .all {
        display: flex;
        justify-content: center;
        text-align: center;
        height: 100vh;
        width: 100vw;
        background-image: url(static/圣诞节.jpg);
    }

    .all img {
        width: 100%;
        height: 100%;
    }

    .word {
        color: green;
        text-align: center;
        width: inherit;
        height: inherit;
        font-size: 50px;
        position: absolute;
        /*设为绝对定位*/
    }
</style>

</html>