首先这个樱花代码出自十三月的博客，我觉得挺好看就问作者要了源码，我自己也改进了很多地方，区别也很大，具体可以前往十三月的博客查看，主要是修复了窗口变化和卡顿的问题，以下代码需要点阅读能力，不是你复制粘贴就能够使用的。

JS源码

同时支持了严格模式。

var img = new Image();
img.src = "../sakura.png";
var change_num = 0;
var canvas_sakura = document.getElementById("sakura");
class Sakura {
    constructor(x, y, s, r, fn) {
        this.x = x;
        this.y = y;
        this.s = s;
        this.r = r;
        this.fn = fn;
    }
    draw(cxt) {
        cxt.save();
        cxt.translate(this.x, this.y);
        cxt.rotate(this.r);
        cxt.drawImage(img, 0, 0, 24 * this.s, 24 * this.s);
        cxt.restore();
    }
    update() {
        this.x = this.fn.x(this.x, this.y);
        this.y = this.fn.y(this.y, this.y);
        this.r = this.fn.r(this.r);
        if (this.x > window.innerWidth || this.x < 0 || this.y > window.innerHeight || this.y < 0) {
            this.r = getRandom('fnr');
            if (Math.random() > .5) {
                this.y = 0;
                this.x = getRandom('x');
                this.s = getRandom('s');
                this.r = getRandom('r');
            } else {
                this.y = getRandom('y');
                this.s = getRandom('s');
                this.r = getRandom('r');
                this.x = window.innerWidth;
            }
        }
    }
}
class SakuraList {
    constructor() {
        this.list = [];
    }
    push(sakura) {
        this.list.push(sakura);
    }
    update() {
        for (var i = 0, len = this.list.length; i < len; i++) {
            this.list[i].update();
        }
    }
    draw(cxt) {
        for (var i = 0, len = this.list.length; i < len; i++) {
            this.list[i].draw(cxt);
        }
    }
    get(i) {
        return this.list[i];
    }
    size() {
        return this.list.length;
    }
}

function getRandom(option) {
    var ret, random;
    switch (option) {
        case 'x':
            ret = Math.random() * window.innerWidth;
            break;
        case 'y':
            ret = Math.random() * window.innerHeight;
            break;
        case 's':
            ret = Math.random();
            break;
        case 'r':
            ret = Math.random() * 6;
            break;
        case 'fnx':
            random = -0.5 + Math.random() * 1;
            ret = function (x) {
                return x + 0.5 * random - 1.7;
            };
            break;
        case 'fny':
            random = 1.5 + Math.random() * 0.7;
            ret = function (y) {
                return y + random;
            };
            break;
        case 'fnr':
            random = Math.random() * 0.03;
            ret = function (r) {
                return r + random;
            };
            break;
    }
    return ret;
}

function startSakura() {
    var cxt = canvas_sakura.getContext('2d');
    canvas_sakura.width = window.innerWidth;
    canvas_sakura.height = window.innerHeight;
    var sakuraList = new SakuraList();
    for (var i = 0; i < canvas_sakura.width / 40; i++) {
        var sakura, randomX, randomY, randomS, randomR, randomFnx, randomFny, randomFnR;
        randomX = getRandom('x');
        randomY = getRandom('y');
        randomR = getRandom('r');
        randomS = getRandom('s');
        randomFnx = getRandom('fnx');
        randomFny = getRandom('fny');
        randomFnR = getRandom('fnr');
        sakura = new Sakura(randomX, randomY, randomS, randomR, {
            x: randomFnx,
            y: randomFny,
            r: randomFnR
        });
        sakura.draw(cxt);
        sakuraList.push(sakura);
    }
    requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame;
    stop = requestAnimationFrame(function f() {
        cxt.clearRect(0, 0, canvas_sakura.width, canvas_sakura.height);
        sakuraList.update();
        sakuraList.draw(cxt);
        requestAnimationFrame(f);
    });
    canvas_sakura.style.opacity = 1;
    change_num++;
}

CSS源码(可选)

#sakura {
    position: fixed;
    z-index: 999;
    left: 0;
    top: 0;
    opacity: 0;
    transition: opacity 1s;
    pointer-events: none
}

代码说明

首先，图片原本是一个base64位的编码图片，因为太长了这里不给出，你可以打开十三月博客的源代码查看js文件的编码复制即可得到图片，个人建议是转成一个地址，方便缓存，因为js文件大小决定了你网站会不会卡顿。

其次change_num是用来记录窗口变化次数的，你可以设置窗口监听，实测50次以内樱花动画不会卡顿变慢，建议change_num的值达到50的时候刷新浏览器以保证动画流畅（谁没事一直拉浏览器？）。

最后就是这个CSS的部分了，为了能够实现过渡效果而设置的，你也可以不设置，但js就要相应改变了（为了过渡，我JS部分默认样式为opacity:0），灵活决定。

理论上改完这些你复制代码就可以看到效果了，如果还有问题可以在下方评论，或者自行百度。