子比主题网站下雪代码，带控制台

 这是一款子比主题的右下角在线下雪样式，用户可以点击按钮如小雪、中雪、大雪进行调整下雪的程度，很不错的一个玩法，一个很小的互动美化方式，喜欢的自行部署吧！

将下面代码放入小工具-自定义底部HTML中 选择合适位置：

<style>
.snow-control{position:fixed;bottom:25px;right:25px;z-index:1000;display:flex;flex-direction:column;align-items:flex-end;gap:12px}.snow-main-btn{width:48px;height:48px;border-radius:50%;background:#f0f7ff;border:1px solid #e8f4ff;outline:none;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:20px;color:#4a90e2;box-shadow:0 3px 10px rgba(74,144,226,0.12);transition:all 0.2s ease;position:relative}.snow-main-btn:hover{background:#e8f4ff;transform:scale(1.05);box-shadow:0 4px 12px rgba(74,144,226,0.15);color:#357abd}.snow-main-btn:active{transform:scale(0.98);box-shadow:0 2px 8px rgba(74,144,226,0.1)}.snow-panel{background:#ffffff;border-radius:12px;padding:10px 8px;box-shadow:0 4px 15px rgba(74,144,226,0.08);display:none;flex-direction:column;gap:8px;min-width:100px;position:relative}.snow-panel::after{content:'';position:absolute;bottom:-6px;right:20px;width:12px;height:12px;background:#ffffff;transform:rotate(45deg);box-shadow:3px 3px 5px rgba(74,144,226,0.05)}.snow-panel.active{display:flex;animation:fadeIn 0.25s ease-out}.snow-btn{padding:8px 0;border-radius:8px;border:none;outline:none;cursor:pointer;background:#f5f9ff;color:#4a90e2;font-size:14px;font-weight:500;transition:all 0.2s ease;text-align:center}.snow-btn.active{background:#4a90e2;color:#ffffff;box-shadow:0 2px 6px rgba(74,144,226,0.15)}.snow-btn:not(.active):hover{background:#ebf3fc}.snowflake{position:fixed;top:-15px;border-radius:80% 60% 70% 90%;background:linear-gradient(135deg,#ffffff,#f8fbff);pointer-events:none;z-index:999;box-shadow:0 0 3px rgba(255,255,255,0.7);transform:rotate(var(--rotate,0deg))}@keyframes snowfall{0%{transform:translateY(-15px) translateX(0) rotate(var(--rotate,0deg)) scale(var(--scale,1));opacity:var(--opacity,0.7)}25%{transform:translateY(calc(25vh)) translateX(var(--x1,10px)) rotate(calc(var(--rotate,0deg) + 90deg)) scale(var(--scale,1));opacity:var(--opacity,0.85)}50%{transform:translateY(calc(50vh)) translateX(var(--x2,-8px)) rotate(calc(var(--rotate,0deg) + 180deg)) scale(var(--scale,1));opacity:var(--opacity,0.9)}75%{transform:translateY(calc(75vh)) translateX(var(--x3,12px)) rotate(calc(var(--rotate,0deg) + 270deg)) scale(var(--scale,1));opacity:var(--opacity,0.8)}100%{transform:translateY(calc(100vh + 15px)) translateX(var(--x4,-5px)) rotate(calc(var(--rotate,0deg) + 360deg)) scale(var(--scale,1));opacity:var(--opacity,0.6)}}@keyframes fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
</style>
<div class="snow-control">
    <div class="snow-panel" id="snowPanel">
        <button class="snow-btn" data-intensity="light">小雪</button>
        <button class="snow-btn" data-intensity="medium">中雪</button>
        <button class="snow-btn" data-intensity="heavy">大雪</button>
        <button class="snow-btn" data-intensity="off">关闭</button>
    </div>
    <button class="snow-main-btn" id="snowMainBtn">❄️</button>
</div>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        const mainBtn = document.getElementById('snowMainBtn');
        const panel = document.getElementById('snowPanel');
        const btns = document.querySelectorAll('.snow-btn');
        let snowInterval = null;
        // 修改默认雪是下面的代码
        let currentIntensity = localStorage.getItem('snowIntensity') || 'light';

        restoreLastState();

        mainBtn.addEventListener('click', () => {
            panel.classList.toggle('active');
        });

        btns.forEach(btn => {
            btn.addEventListener('click', () => {
                const intensity = btn.getAttribute('data-intensity');
                setSnow(intensity);
                updateActiveBtn(intensity);
                localStorage.setItem('snowIntensity', intensity);
                panel.classList.remove('active');
            });
        });

        function setSnow(intensity) {
            clearInterval(snowInterval);
            document.querySelectorAll('.snowflake').forEach(s => s.remove());
            currentIntensity = intensity;

            if (intensity === 'off') return;

            let config = {};
            switch(intensity) {
                case 'light':
                    config = { 
                        count: 15,
                        sizeMin: 2, sizeMax: 4, 
                        speedMin: 8, speedMax: 12, 
                        xRange: 15 
                    };
                    break;
                case 'medium':
                    config = { 
                        count: 35, 
                        sizeMin: 3, sizeMax: 6, 
                        speedMin: 6, speedMax: 10, 
                        xRange: 20 
                    };
                    break;
                case 'heavy':
                    config = { 
                        count: 60, 
                        sizeMin: 4, sizeMax: 8, 
                        speedMin: 4, speedMax: 8, 
                        xRange: 25 
                    };
                    break;
            }

            for (let i = 0; i < config.count; i++) {
                createSnow(config);
            }

            snowInterval = setInterval(() => {
                document.querySelectorAll('.snowflake').forEach(snow => {
                    if (parseFloat(snow.style.top) > window.innerHeight) {
                        snow.remove();
                    }
                });
                createSnow(config);
            }, 600);
        }

        function createSnow(config) {
            const snow = document.createElement('div');
            snow.classList.add('snowflake');

            const size = Math.random() * (config.sizeMax - config.sizeMin) + config.sizeMin;
            snow.style.width = `${size}px`;
            snow.style.height = `${size * (0.8 + Math.random() * 0.4)}px`;

            const startX = Math.random() * window.innerWidth;
            snow.style.left = `${startX}px`;

            const opacity = 0.5 + Math.random() * 0.4;
            snow.style.setProperty('--opacity', opacity);

            const rotate = Math.random() * 360;
            snow.style.setProperty('--rotate', `${rotate}deg`);

            const scale = 0.7 + Math.random() * 0.5;
            snow.style.setProperty('--scale', scale);
            const x1 = (Math.random() - 0.5) * config.xRange;  
            const x2 = (Math.random() - 0.5) * config.xRange * 1.2; 
            const x3 = (Math.random() - 0.5) * config.xRange; 
            const x4 = (Math.random() - 0.5) * config.xRange * 0.8;
            snow.style.setProperty('--x1', `${x1}px`);
            snow.style.setProperty('--x2', `${x2}px`);
            snow.style.setProperty('--x3', `${x3}px`);
            snow.style.setProperty('--x4', `${x4}px`);

            const duration = Math.random() * (config.speedMax - config.speedMin) + config.speedMin;
            snow.style.animation = `snowfall ${duration}s linear infinite`;
            snow.style.animationDelay = `${Math.random() * 3}s`;
            document.body.appendChild(snow);
        }
        function updateActiveBtn(intensity) {
            btns.forEach(btn => {
                btn.classList.toggle('active', btn.getAttribute('data-intensity') === intensity);
            });
        }
        function restoreLastState() {
            updateActiveBtn(currentIntensity);
            setSnow(currentIntensity);
        }
        document.addEventListener('click', (e) => {
            if (!mainBtn.contains(e.target) && !panel.contains(e.target)) {
                panel.classList.remove('active');
            }
        });
        window.addEventListener('resize', () => {
            if (currentIntensity !== 'off') {
                document.querySelectorAll('.snowflake').forEach(s => s.remove());
                setSnow(currentIntensity);
            }
        });
    });
</script>

子比主题网站下雪代码，带控制台，在此记录一下。