雪花效果

2025年12月12日搭建记录
下雪了，也给网站加上小雪花❄️
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hexo 博客雪花效果预览</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            background-color: #2c3e50; /* 深色背景以便观察白雪 */
            color: #ecf0f1;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            height: 100vh;
            overflow-x: hidden;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }

        .content {
            z-index: 10;
            background: rgba(255, 255, 255, 0.1);
            padding: 40px;
            border-radius: 15px;
            backdrop-filter: blur(5px);
            max-width: 600px;
            text-align: center;
            box-shadow: 0 4px 15px rgba(0,0,0,0.3);
        }

        h1 {
            font-weight: 300;
            margin-bottom: 20px;
        }

        p {
            line-height: 1.6;
        }

        .highlight {
            color: #e74c3c;
            font-weight: bold;
        }

        /* 模拟博客文章内容 */
        .mock-post {
            margin-top: 20px;
            text-align: left;
            font-size: 0.9em;
            color: #bdc3c7;
        }
    </style>
</head>
<body>

    <div class="content">
        <h1>❄️ 淡淡的雪花效果 ❄️</h1>
        <p>这就是应用到您博客后的样子。</p>
        <p>雪花具有随机的大小、透明度和飘落速度。</p>
        <p>鼠标悬停在此处，<span class="highlight">雪花不会阻挡点击</span> (Pointer Events None)。</p>
        
        <div class="mock-post">
            <hr style="border-color: rgba(255,255,255,0.1);">
            <p><strong>示例文章标题</strong></p>
            <p>这是一段示例文本。雪花应该在背景中轻轻飘落，不影响阅读体验。代码使用了 HTML5 Canvas，性能消耗极低。</p>
        </div>
    </div>

    <!-- 雪花脚本开始 -->
    <script>
        (function() {
            // 配置参数
            const config = {
                snowFlakeCount: 60,      // 雪花数量
                maxRadius: 12,           // 最大雪花尺寸 (改为字体大小，需调大)
                minRadius: 8,            // 最小雪花尺寸
                minOpacity: 0.3,         // 最小透明度
                maxOpacity: 0.8,         // 最大透明度
                minSpeed: 0.5,           // 最小下落速度
                maxSpeed: 1.5,           // 最大下落速度
                zIndex: 999999,          // 层级
                color: "255, 255, 255"   // 雪花颜色 RGB
            };

            const canvas = document.createElement('canvas');
            const ctx = canvas.getContext('2d');
            
            // 设置 Canvas 样式
            canvas.style.position = 'fixed';
            canvas.style.top = '0';
            canvas.style.left = '0';
            canvas.style.width = '100%';
            canvas.style.height = '100%';
            canvas.style.zIndex = config.zIndex;
            canvas.style.pointerEvents = 'none'; // 关键：不阻挡鼠标事件
            
            document.body.appendChild(canvas);

            let width, height;
            let snowflakes = [];

            // 初始化窗口大小
            function resize() {
                width = window.innerWidth;
                height = window.innerHeight;
                canvas.width = width;
                canvas.height = height;
            }
            window.addEventListener('resize', resize);
            resize();

            // 雪花字符集合
            const snowChars = ['❄', '❅', '❆'];

            // 雪花类
            class Snowflake {
                constructor() {
                    this.reset(true);
                }

                reset(initial = false) {
                    this.x = Math.random() * width;
                    this.y = initial ? Math.random() * height : -20;
                    this.size = Math.random() * (config.maxRadius - config.minRadius) + config.minRadius;
                    this.speed = Math.random() * (config.maxSpeed - config.minSpeed) + config.minSpeed;
                    this.opacity = Math.random() * (config.maxOpacity - config.minOpacity) + config.minOpacity;
                    this.drift = Math.random() * 2 - 1; 
                    
                    // 新增：旋转属性和随机字符
                    this.rotation = Math.random() * Math.PI * 2;
                    this.spin = (Math.random() - 0.5) * 0.05; // 旋转速度
                    this.char = snowChars[Math.floor(Math.random() * snowChars.length)];
                }

                update() {
                    this.y += this.speed;
                    this.x += this.drift * 0.5;
                    this.rotation += this.spin; // 更新旋转角度

                    // 边界检查
                    if (this.y > height + 20) { // 稍微放宽底部边界，防止突然消失
                        this.reset();
                    }
                    if (this.x > width + 20) {
                        this.x = -20;
                    } else if (this.x < -20) {
                        this.x = width + 20;
                    }
                }

                draw() {
                    ctx.save(); // 保存当前状态
                    ctx.translate(this.x, this.y); // 移动画布原点到雪花位置
                    ctx.rotate(this.rotation); // 旋转

                    ctx.font = `${this.size}px Arial, sans-serif`;
                    ctx.fillStyle = `rgba(${config.color}, ${this.opacity})`;
                    ctx.textAlign = 'center';
                    ctx.textBaseline = 'middle';
                    ctx.fillText(this.char, 0, 0); // 在原点绘制

                    ctx.restore(); // 恢复状态
                }
            }

            // 初始化雪花
            for (let i = 0; i < config.snowFlakeCount; i++) {
                snowflakes.push(new Snowflake());
            }

            // 动画循环
            function animate() {
                ctx.clearRect(0, 0, width, height);
                snowflakes.forEach(flake => {
                    flake.update();
                    flake.draw();
                });
                requestAnimationFrame(animate);
            }
            
            animate();
        })();
    </script>
    <!-- 雪花脚本结束 -->

</body>
</html>