本文教你使用 JavaScript 和 CSS transition 实现多个 图标（如社交平台 Logo）在白色与红色之间循环渐变切换，解决仅作用于首个图标的常见问题。
本文教你使用 javascript 和 css transition 实现多个 `` 图标（如社交平台 logo）在白色与红色之间循环渐变切换，解决仅作用于首个图标的常见问题。
要让页面中所有 图标（例如 Spotify、Discord、YouTube 等品牌图标）同步、平滑、循环地在 white 和 red 之间切换颜色，关键在于两点：正确选取全部目标元素，并复用 CSS 过渡效果。
首先，你当前使用的 document.querySelector('i') 只返回第一个匹配的 元素，因此颜色变化仅发生在首个图标上。应改用 document.querySelectorAll('i') 获取所有图标节点集合，并通过 forEach() 遍历更新每个元素的 style.color。
其次，确保你的 CSS 已为 元素定义了过渡动画，否则颜色切换将是突兀的跳变：
i {
color: white;
transition: color 0.5s ease;
}
✅ 注意：transition 必须写在基础样式中（而非仅在 JS 中动态设置），且建议显式声明 ease 或 linear，避免浏览器默认行为差异。
以下是优化后的完整脚本（推荐放入 main.js 或 <script> 标签底部）：</script>
// 定义颜色序列（支持扩展更多颜色，如 ['white', 'red', 'hotpink', 'gold']）
const colors = ['white', 'red'];
let activeIndex = 0;
// 一次性获取所有图标元素（性能更优，避免重复查询 DOM）
const iconElements = document.querySelectorAll('i.fa-brands');
// 每 1500ms 切换一次颜色（即每 1.5 秒完成一个白→红→白循环）
setInterval(() => {
iconElements.forEach(el => {
el.style.color = colors[activeIndex];
});
activeIndex = (activeIndex + 1) % colors.length;
}, 1500);
? 增强建议：
- 使用更精确的选择器 i.fa-brands 替代泛用的 'i'，避免误操作其他 标签（如斜体文本）；
- 若需更流畅的呼吸式渐变（非硬切），可改用 CSS @keyframes + animation，但 JS 控制更适合动态配色逻辑；
- 如需响应式暂停（如用户离开页面时暂停动画），可结合 document.hidden 和 visibilitychange 事件优化。
最终效果：5 个社交图标将严格同步，在纯白与正红间以 0.5 秒缓动过渡，每 1.5 秒切换一次，形成轻盈、一致的视觉节奏。
