樱花飘落动画 - 赏心悦目的动态背景

<!DOCTYPE html>
<html>
<head>
    <title>樱花飘落动画 - 赏心悦目的动态背景</title>
    <style>
        body {
            background-color: #f9e9ea;
            overflow: hidden;
        }
<pre><code>    canvas {
        position: absolute;
        top: 0;
        left: 0;
        z-index: -1;
    }
&lt;/style&gt;
</code></pre>
</head>
<body>
    <canvas id='canvas'></canvas>
    <script>
        var canvas = document.getElementById('canvas');
        var ctx = canvas.getContext('2d');
        var width = window.innerWidth;
        var height = window.innerHeight;
        canvas.width = width;
        canvas.height = height;
<pre><code>    var particles = [];
    var particleCount = 200;
    var colors = ['#FFC0CB', '#FF69B4', '#FF1493', '#C71585', '#DB7093'];
    
    function Particle() {
        this.x = Math.random() * width;
        this.y = Math.random() * height;
        this.size = Math.random() * 10 + 2;
        this.speedX = Math.random() * 3 - 1.5;
        this.speedY = Math.random() * 3 - 1.5;
        this.color = colors[Math.floor(Math.random() * colors.length)];
        this.duration = Math.random() * 100 + 50;
        this.counter = 0;
    
        this.update = function () {
            this.x += this.speedX;
            this.y += this.speedY;
    
            if (this.size &gt; 0.2)
                this.size -= 0.1;
    
            if (this.size &lt;= 0.2 &amp;&amp; this.counter &lt; this.duration) {
                this.counter++;
            } else {
                this.x = Math.random() * width;
                this.y = -10;
                this.size = Math.random() * 10 + 2;
                this.speedX = Math.random() * 3 - 1.5;
                this.speedY = Math.random() * 3 - 1.5;
                this.color = colors[Math.floor(Math.random() * colors.length)];
                this.counter = 0;
            }
        };
    
        this.draw = function () {
            ctx.beginPath();
            ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
            ctx.fillStyle = this.color;
            ctx.fill();
        };
    }
    
    function createParticles() {
        for (var i = 0; i &lt; particleCount; i++) {
            particles.push(new Particle());
        }
    }
    
    function animateParticles() {
        ctx.clearRect(0, 0, width, height);
    
        for (var i = 0; i &lt; particles.length; i++) {
            particles[i].update();
            particles[i].draw();
        }
    
        requestAnimationFrame(animateParticles);
    }
    
    createParticles();
    animateParticles();
    
    // Remove mouse interaction effects
    canvas.addEventListener('mousemove', function(event) {
        event.stopPropagation();
    });
&lt;/script&gt;
</code></pre>
</body>
</html>