两种雪花飘落效果

wordpress5个月前发布 admin

3 0 0

雪花飘落，宛如冬日的精灵在翩翩起舞，带来无尽的浪漫与静谧。本次博客将为大家呈现两种独特的雪花飘落效果，从简单的代码模拟到精美的动画设计，带你领略雪花之美与技术的奇妙融合。

效果演示&代码

第一种

第二种

效果演示

代码

[hidecontent type=”logged”]

function falling_snow_new_style(){?>
    <style>
        .snowflake {
            position: fixed;
            top: -10px;
            background-color: white;
            border-radius: 50%;
            opacity: 0.7;
            z-index: 1000;
        }
    </style>
    <script>
        function createSnowflake() {
            const snowflake = document.createElement('div');
            snowflake.classList.add('snowflake');
            snowflake.style.left = Math.random() * window.innerWidth + 'px';
            snowflake.style.animationName = 'fall';
            snowflake.style.animationDuration = Math.random() * 3 + 2 + 's'; // 随机下落时间
            snowflake.style.animationTimingFunction = 'linear';
            snowflake.style.animationIterationCount = 'infinite';
            snowflake.style.animationDelay = Math.random() * 5 + 's'; // 随机延迟时间
            snowflake.style.borderRadius = '50%';
            snowflake.style.opacity = Math.random();
            snowflake.style.transform = 'scale(' + Math.random() + ')';
            snowflake.style.width = Math.random() * 10 + 'px';
            snowflake.style.height = snowflake.style.width;

            document.body.appendChild(snowflake);

            snowflake.addEventListener('animationend', function() {
                snowflake.remove();
            });
        }

        function initSnow() {
            for (let i = 0; i < 200; i++) { // 200 个雪花
                createSnowflake();
            }
        }

        const style = document.createElement('style');
        style.innerHTML = `
            @keyframes fall {
            0% { top: -10px; }
            100% { top: 100%; }
            }
        `;
        document.head.appendChild(style);
        initSnow();
    </script>
<?php } add_action('wp_head', 'falling_snow_new_style');

[/hidecontent]

效果演示

代码

[hidecontent type=”logged”]

function falling_snow_style(){?>
    <script type="text/javascript">
        (function($){
        $.fn.snow = function(options){
        var $flake = $('<div id="snowbox" />').css({'position': 'absolute','z-index':'9999', 'top': '-50px'}).html('❄'),
        documentHeight     = $(document).height(),
        documentWidth  = $(document).width(),
        defaults = {
            minSize   : 10,
            maxSize   : 20,
            newOn     : 1000,
            flakeColor : "#AFDAEF" 
        },
        options = $.extend({}, defaults, options);
        var interval= setInterval( function(){
        var startPositionLeft = Math.random() * documentWidth;
        var startPositionTop = Math.random() * documentHeight;
        startOpacity = 0.5 + Math.random(),
        sizeFlake = options.minSize + Math.random() * options.maxSize,
        endPositionTop = documentHeight - 200,
        endPositionLeft = startPositionLeft - 500 + Math.random() * 500,
        durationFall = documentHeight * 10 + Math.random() * 5000;
        $flake.clone().appendTo('body').css({
            left: startPositionLeft,
            top: startPositionTop,
            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: 50,   /* 定义密集程度，数字越小越密集 */
            });
        });
    </script>
<?php } add_action('wp_head', 'falling_snow_style');

[/hidecontent]