如何用JS实现SVG中CSS动画图标的随机独立脉冲效果

问题分析 #

你当前所有图标同步动画，是因为CSS变量--delay未单独赋值，所有元素默认使用0作为延迟时间，导致动画同时触发。我们需要通过JavaScript为每个分组（group1至group22）设置随机延迟值，同时优化CSS结构让分组内的两个路径同步动画。

步骤1：优化CSS代码 #

调整CSS，确保分组内的两个路径共享同一个延迟变量，同时修正语法错误：

<style>
    .st0{fill:#FFCA19;stroke:#FFFFFF;stroke-miterlimit:10;}
    .st1{fill:#FFFFFF; opacity: 0.1; transform-origin: center;}
    .st2{fill:#E24D25; opacity: 0.1; transform-origin: center;}
    
    /* 给分组添加动画控制类 */
    .pulse-group {
        --delay: 0;
    }
    .pulse-group .st1, .pulse-group .st2 {
        animation: pulse 3s ease-in-out infinite;
        animation-delay: calc(var(--delay) * 1ms);
    }
    
    @keyframes pulse {
      0% { transform: scale(1); opacity: 0.1; }
      50% { transform: scale(1.02); opacity: 1; }
      100% { transform: scale(1); opacity: 0.1; }
    }
</style>

步骤2：修改SVG分组结构 #

给每个group元素添加pulse-group类，确保CSS能正确选中并应用动画：

<g id="group1" class="pulse-group">
    <!-- 内部path元素保持不变 -->
</g>
<g id="group2" class="pulse-group">
    <!-- 内部path元素保持不变 -->
</g>
<!-- 其余group同理添加pulse-group类 -->

步骤3：添加JavaScript代码 #

在SVG所在的HTML页面中加入以下JS代码，为每个分组生成随机延迟：

// 选中所有带pulse-group类的分组
const pulseGroups = document.querySelectorAll('.pulse-group');

pulseGroups.forEach(group => {
    // 生成0到3000ms的随机延迟（对应动画时长3秒）
    const randomDelay = Math.floor(Math.random() * 3000);
    // 给当前分组设置自定义延迟变量
    group.style.setProperty('--delay', randomDelay);
});

效果说明 #

• 每个分组内的两个path会同步执行脉冲动画，保证图标整体效果一致
• 不同分组之间的动画启动时间随机，彻底解决同步问题
• 随机延迟范围和动画时长（3秒）匹配，确保动画循环不会出现长期同步的情况

内容的提问来源于stack exchange，提问作者BobSaget