如何用Tailwind实现网站音乐播放时的动态图标？

1. 基础播放/暂停切换动画 #

这是最常用的交互效果，点击图标即可切换播放状态，配合平滑过渡动画：

<div class="relative w-16 h-16 cursor-pointer" id="musicToggle">
  <!-- 播放图标 -->
  <div class="play-icon absolute inset-0 flex items-center justify-center transition-all duration-300">
    <svg class="w-10 h-10 text-purple-500" fill="currentColor" viewBox="0 0 20 20">
      <path d="M6.3 2.841A1.5 1.5 0 004 4.11V15.89a1.5 1.5 0 002.3 1.269l9.344-5.89a1.5 1.5 0 000-2.538L6.3 2.84z" />
    </svg>
  </div>
  <!-- 暂停图标 -->
  <div class="pause-icon absolute inset-0 flex items-center justify-center opacity-0 transition-all duration-300">
    <svg class="w-10 h-10 text-purple-500" fill="currentColor" viewBox="0 0 20 20">
      <path d="M5.75 3a.75.75 0 00-.75.75v12.5c0 .414.336.75.75.75h2.5a.75.75 0 00.75-.75V3.75A.75.75 0 008.25 3h-2.5zM12.75 3a.75.75 0 00-.75.75v12.5c0 .414.336.75.75.75h2.5a.75.75 0 00.75-.75V3.75a.75.75 0 00-.75-.75h-2.5z" />
    </svg>
  </div>
</div>

<script>
const toggleBtn = document.getElementById('musicToggle');
const playIcon = toggleBtn.querySelector('.play-icon');
const pauseIcon = toggleBtn.querySelector('.pause-icon');

toggleBtn.addEventListener('click', () => {
  playIcon.classList.toggle('opacity-0');
  pauseIcon.classList.toggle('opacity-0');
  // 此处可添加实际音乐播放/暂停逻辑
});
</script>

说明：通过opacity-0和transition-all duration-300实现淡入淡出切换，也可替换为scale-0/scale-100实现缩放切换，按需调整。

2. 声波跳动动画（播放状态氛围感效果） #

想要更有律动感觉，可以做一组错落跳动的声波条，需要先在Tailwind配置里注册自定义动画：

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    extend: {
      animation: {
        'wave-1': 'wave 1s ease-in-out infinite',
        'wave-2': 'wave 1s ease-in-out 0.2s infinite',
        'wave-3': 'wave 1s ease-in-out 0.4s infinite',
      },
      keyframes: {
        wave: {
          '0%, 100%': { transform: 'scaleY(0.5)' },
          '50%': { transform: 'scaleY(1.5)' },
        },
      },
    },
  },
  plugins: [],
}

然后编写HTML部分：

<!-- 播放时显示声波，暂停时隐藏 -->
<div class="flex gap-2 items-center justify-center h-16 opacity-0 transition-opacity duration-300" id="waveContainer">
  <div class="w-2 h-8 bg-purple-500 rounded-full animate-wave-1"></div>
  <div class="w-2 h-8 bg-purple-500 rounded-full animate-wave-2"></div>
  <div class="w-2 h-8 bg-purple-500 rounded-full animate-wave-3"></div>
</div>

说明：给不同声波条设置动画延迟，实现错落跳动的效果，模拟音乐播放时的声波律动。

3. 组合完整效果（播放暂停+声波） #

把上面两个效果结合，就是完整的音乐播放动态图标：

<div class="flex flex-col items-center gap-4">
  <div class="relative w-16 h-16 cursor-pointer" id="musicToggle">
    <div class="play-icon absolute inset-0 flex items-center justify-center transition-all duration-300">
      <svg class="w-10 h-10 text-purple-500" fill="currentColor" viewBox="0 0 20 20">
        <path d="M6.3 2.841A1.5 1.5 0 004 4.11V15.89a1.5 1.5 0 002.3 1.269l9.344-5.89a1.5 1.5 0 000-2.538L6.3 2.84z" />
      </svg>
    </div>
    <div class="pause-icon absolute inset-0 flex items-center justify-center opacity-0 transition-all duration-300">
      <svg class="w-10 h-10 text-purple-500" fill="currentColor" viewBox="0 0 20 20">
        <path d="M5.75 3a.75.75 0 00-.75.75v12.5c0 .414.336.75.75.75h2.5a.75.75 0 00.75-.75V3.75A.75.75 0 008.25 3h-2.5zM12.75 3a.75.75 0 00-.75.75v12.5c0 .414.336.75.75.75h2.5a.75.75 0 00.75-.75V3.75a.75.75 0 00-.75-.75h-2.5z" />
      </svg>
    </div>
  </div>

  <div class="flex gap-2 items-center justify-center opacity-0 transition-opacity duration-300" id="waveContainer">
    <div class="w-2 h-8 bg-purple-500 rounded-full animate-wave-1"></div>
    <div class="w-2 h-8 bg-purple-500 rounded-full animate-wave-2"></div>
    <div class="w-2 h-8 bg-purple-500 rounded-full animate-wave-3"></div>
  </div>
</div>

<script>
const toggleBtn = document.getElementById('musicToggle');
const playIcon = toggleBtn.querySelector('.play-icon');
const pauseIcon = toggleBtn.querySelector('.pause-icon');
const waveContainer = document.getElementById('waveContainer');

toggleBtn.addEventListener('click', () => {
  const isPlaying = playIcon.classList.contains('opacity-0');
  
  playIcon.classList.toggle('opacity-0');
  pauseIcon.classList.toggle('opacity-0');
  waveContainer.classList.toggle('opacity-0', !isPlaying);
  
  // 此处替换为你的音乐播放/暂停逻辑
});
</script>

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