如何改变改变class="petal"中的数字举个例子

如果你想改变`.petal`类中表示花瓣的数量，只需要在HTML结构中添加更多的此类元素，并更改它们的class属性值。例如，如果你想有三个花瓣，可以这样做：

<div class="petal" style="transform: translateX(0) scale(1);"></div>
<div class="petal" style="transform: translateX(-50px) scale(0.9);"></div>
<div class="petal" style="transform: translateX(-100px) scale(0.8);"></div>

在这个例子中，每个`.petal`都有一个不同的`translateX()`和`scale()`样式，使得花瓣看起来像是从不同方向和缩放程度飘落。你也可以通过修改CSS动画部分来控制每片花瓣的不同飘落路径和速度。

如果你想要保持相同的动画名称，但改变单个花瓣的行为，可以在JavaScript中动态生成并添加这些元素，同时绑定各自的动画效果。例如，可以创建一个新的花瓣并添加动画：

function addPetal() {
    const petal = document.createElement('div');
    petal.className = 'petal';
    petal.style.transform = 'translateY(0)';
    
    // 添加动画
    petal.style.animation = 'fall 2s ease-in-out infinite';

    document.body.appendChild(petal);
}

// 调用函数以创建新的花瓣
addPetal();

每次调用`addPetal`函数都会在页面上增加一个新的花瓣。