网站背景飘花瓣效果js代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Petal Effect</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <script src="script.js"></script>
</body>
</html>

body {
    margin: 0;
    overflow: hidden;
    background: #000;
}

.petal {
    position: absolute;
    width: 20px;
    height: 20px;
    background: url('petal.png') no-repeat center center;
    background-size: cover;
    animation: fall linear infinite;
}

@keyframes fall {
    to {
        transform: translateY(100vh);
    }
}

function createPetal() {
    const petal = document.createElement('div');
    petal.className = 'petal';
    petal.style.left = `${Math.random() * 100}vw`;
    petal.style.animationDuration = `${Math.random() * 5 + 5}s`;
    document.body.appendChild(petal);

    petal.addEventListener('animationend', () => {
        petal.remove();
    });
}

setInterval(createPetal, 100);