给网页增加一个好看的动态落叶背景🍁

发布日期：2026-02-15

最近想给博客加个有点氛围感的背景效果，传统的 Canvas 方案代码量大且复杂，于是尝试用 SVG + CSS 动画实现了一个轻量级的落叶飘落效果。

落叶背景效果示意图

效果

现在你看到的这个页面就有落叶背景 🍂 48片叶子随机飘落，透明度、速度、旋转角度各不相同，营造静谧的秋日氛围。
动态页面链接：https://wswx.top/image/svgdir/Leaf_background.html

实现

1. CSS 动画定义

.leaf {
    position: fixed;
    pointer-events: none;  /* 不阻挡点击 */
    z-index: -1;           /* 置于背景层 */
    animation: fall linear infinite;
}

@keyframes fall {
    0% {
        transform: translateY(-100px) rotate(0deg);
        opacity: 0;
    }
    10%, 90% {
        opacity: var(--alpha);
    }
    100% {
        transform: translateY(calc(100vh + 100px)) 
                   rotate(var(--rotation)) 
                   translateX(var(--drift));
        opacity: 0;
    }
}

2. JavaScript 动态生成叶子

const LEAF_COUNT = 48;
const SVG_PATHS = [
    '/image/svgdir/orangeleaves.svg',
    '/image/svgdir/redleaves.svg',
    '/image/svgdir/yellowleaves.svg'
];

function createLeaf() {
    const img = document.createElement('img');
    img.className = 'leaf';
    img.src = SVG_PATHS[Math.floor(Math.random() * SVG_PATHS.length)];
    
    // 随机参数
    const size = random(30, 60);
    const duration = random(12, 25);
    const delay = random(0, 20);
    const startX = random(-50, window.innerWidth + 50);
    const rotation = random(360, 1080);
    const drift = random(-150, 150);
    const alpha = random(0.4, 0.8);
    
    img.style.cssText = `
        width: ${size}px;
        left: ${startX}px;
        top: -${random(50, 150)}px;
        --rotation: ${rotation}deg;
        --drift: ${drift}px;
        --alpha: ${alpha};
        animation-duration: ${duration}s;
        animation-delay: -${delay}s;  /* 负延迟让叶子初始就分布在各处 */
    `;
    
    document.body.appendChild(img);
}

关键技巧

负延迟动画（animation-delay: -Xs）

这是让叶子在页面加载时就分布在屏幕各处的关键。负延迟会让动画从中间某帧开始播放，而不是从头开始。

CSS 变量传递随机值

通过 --rotation、--drift、--alpha 等自定义属性，将 JavaScript 生成的随机值传递给 CSS 动画。

z-index: -1

确保落叶在所有内容后方，不会遮挡文字和交互元素。

优化项

  • pointer-events: none：落叶不响应鼠标事件，避免影响页面交互
  • CSS 动画：利用 GPU 加速，比 JavaScript 动画更流畅
  • 适量叶子：48片叶子在性能和视觉效果间取得平衡
  • SVG 格式：矢量图形，缩放不失真，文件体积小

相比传统的 Canvas 方案，SVG + CSS 动画的实现更加优雅：

  • 代码量少
  • 性能更好（浏览器原生优化）
  • 更易维护和定制
  • 视觉效果同样出色