Tailwind CSS Swap Components

                            <section class="flex items-center justify-center p-8 gap-8">
  <!-- 基本文本交换 -->
  <label class="swap">
    <input type="checkbox" />
    <div class="swap-on">ON</div>
    <div class="swap-off">OFF</div>
  </label>

  <!-- 带颜色的文本交换 -->
  <label class="swap">
    <input type="checkbox" />
    <div class="swap-on text-green-600 font-bold">开启</div>
    <div class="swap-off text-red-600 font-bold">关闭</div>
  </label>

  <!-- 带大小的文本交换 -->
  <label class="swap text-xl">
    <input type="checkbox" />
    <div class="swap-on">YES</div>
    <div class="swap-off">NO</div>
  </label>
</section>

<style>
  .swap {
    position: relative;
    display: inline-grid;
    cursor: pointer;
    user-select: none;
  }
  
  .swap > * {
    grid-column-start: 1;
    grid-row-start: 1;
    transition-property: opacity, transform;
    transition-duration: 300ms;
    transition-timing-function: ease-in-out;
  }
  
  .swap input {
    appearance: none;
    position: absolute;
    opacity: 0;
  }
  
  .swap .swap-on,
  .swap .swap-off {
    display: grid;
    place-items: center;
  }
  
  .swap .swap-on {
    opacity: 0;
  }
  
  .swap input:checked ~ .swap-on {
    opacity: 1;
  }
  
  .swap input:checked ~ .swap-off {
    opacity: 0;
  }
</style> 
                        

                            <section class="flex items-center justify-center p-8 gap-8">
  <!-- 带旋转效果的汉堡图标交换 -->
  <label class="swap swap-rotate">
    <!-- 隐藏的复选框控制状态 -->
    <input type="checkbox" />

    <!-- 汉堡图标 -->
    <svg
      class="swap-off fill-current"
      xmlns="http://www.w3.org/2000/svg"
      width="32"
      height="32"
      viewBox="0 0 512 512">
      <path d="M64,384H448V341.33H64Zm0-106.67H448V234.67H64ZM64,128v42.67H448V128Z" />
    </svg>

    <!-- 关闭图标 -->
    <svg
      class="swap-on fill-current"
      xmlns="http://www.w3.org/2000/svg"
      width="32"
      height="32"
      viewBox="0 0 512 512">
      <polygon
        points="400 145.49 366.51 112 256 222.51 145.49 112 112 145.49 222.51 256 112 366.51 145.49 400 256 289.49 366.51 400 400 366.51 289.49 256 400 145.49" />
    </svg>
  </label>
  
  <!-- 带旋转效果的按钮样式图标交换 -->
  <label class="btn btn-circle swap swap-rotate">
    <!-- 隐藏的复选框控制状态 -->
    <input type="checkbox" />

    <!-- 播放图标 -->
    <svg 
      class="swap-off fill-current" 
      xmlns="http://www.w3.org/2000/svg" 
      width="24" 
      height="24" 
      viewBox="0 0 24 24">
      <path d="M8 5v14l11-7z" />
    </svg>

    <!-- 暂停图标 -->
    <svg 
      class="swap-on fill-current" 
      xmlns="http://www.w3.org/2000/svg" 
      width="24" 
      height="24" 
      viewBox="0 0 24 24">
      <path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z" />
    </svg>
  </label>
  
  <!-- 带旋转效果的音量图标交换 -->
  <label class="swap swap-rotate text-gray-700">
    <!-- 隐藏的复选框控制状态 -->
    <input type="checkbox" />

    <!-- 音量开启图标 -->
    <svg
      class="swap-on fill-current"
      xmlns="http://www.w3.org/2000/svg"
      width="36"
      height="36"
      viewBox="0 0 24 24">
      <path
        d="M14,3.23V5.29C16.89,6.15 19,8.83 19,12C19,15.17 16.89,17.84 14,18.7V20.77C18,19.86 21,16.28 21,12C21,7.72 18,4.14 14,3.23M16.5,12C16.5,10.23 15.5,8.71 14,7.97V16C15.5,15.29 16.5,13.76 16.5,12M3,9V15H7L12,20V4L7,9H3Z" />
    </svg>

    <!-- 音量关闭图标 -->
    <svg
      class="swap-off fill-current"
      xmlns="http://www.w3.org/2000/svg"
      width="36"
      height="36"
      viewBox="0 0 24 24">
      <path
        d="M3,9H7L12,4V20L7,15H3V9M16.59,12L14,9.41L15.41,8L18,10.59L20.59,8L22,9.41L19.41,12L22,14.59L20.59,16L18,13.41L15.41,16L14,14.59L16.59,12Z" />
    </svg>
  </label>
</section>

<style>
  .swap {
    position: relative;
    display: inline-grid;
    cursor: pointer;
    user-select: none;
  }
  
  .swap > * {
    grid-column-start: 1;
    grid-row-start: 1;
    transition-property: opacity, transform;
    transition-duration: 300ms;
    transition-timing-function: ease-in-out;
  }
  
  .swap input {
    appearance: none;
    position: absolute;
    opacity: 0;
  }
  
  .swap .swap-on,
  .swap .swap-off {
    display: grid;
    place-items: center;
  }
  
  .swap .swap-on {
    opacity: 0;
  }
  
  .swap input:checked ~ .swap-on {
    opacity: 1;
  }
  
  .swap input:checked ~ .swap-off {
    opacity: 0;
  }
  
  /* 旋转效果 */
  .swap-rotate .swap-on,
  .swap-rotate .swap-off {
    transform-style: preserve-3d;
    backface-visibility: hidden;
    transform: rotateY(0deg);
  }
  
  .swap-rotate .swap-on {
    transform: rotateY(180deg);
  }
  
  .swap-rotate input:checked ~ .swap-on {
    transform: rotateY(0deg);
  }
  
  .swap-rotate input:checked ~ .swap-off {
    transform: rotateY(-180deg);
  }
  
  /* 按钮样式 */
  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem;
    background-color: #e5e7eb;
    border-radius: 0.25rem;
    transition: background-color 0.3s ease;
  }
  
  .btn-circle {
    border-radius: 9999px;
    width: 40px;
    height: 40px;
  }
</style> 
                        

                            <section class="flex items-center justify-center p-8 gap-12">
  <!-- 带翻转效果的表情符号交换 -->
  <label class="swap swap-flip text-9xl">
    <!-- 隐藏的复选框控制状态 -->
    <input type="checkbox" />

    <div class="swap-on">😈</div>
    <div class="swap-off">😇</div>
  </label>
  
  <!-- 带翻转效果的另一组表情符号 -->
  <label class="swap swap-flip text-7xl">
    <!-- 隐藏的复选框控制状态 -->
    <input type="checkbox" />

    <div class="swap-on">🌙</div>
    <div class="swap-off">☀️</div>
  </label>
  
  <!-- 带翻转效果的文本卡片 -->
  <label class="swap swap-flip">
    <!-- 隐藏的复选框控制状态 -->
    <input type="checkbox" />

    <div class="swap-on p-4 bg-blue-500 text-white rounded-lg shadow-lg">
      <div class="text-xl font-bold">后面</div>
    </div>
    <div class="swap-off p-4 bg-green-500 text-white rounded-lg shadow-lg">
      <div class="text-xl font-bold">前面</div>
    </div>
  </label>
</section>

<style>
  .swap {
    position: relative;
    display: inline-grid;
    cursor: pointer;
    user-select: none;
  }
  
  .swap > * {
    grid-column-start: 1;
    grid-row-start: 1;
    transition-property: opacity, transform;
    transition-duration: 300ms;
    transition-timing-function: ease-in-out;
  }
  
  .swap input {
    appearance: none;
    position: absolute;
    opacity: 0;
  }
  
  .swap .swap-on,
  .swap .swap-off {
    display: grid;
    place-items: center;
  }
  
  .swap .swap-on {
    opacity: 0;
  }
  
  .swap input:checked ~ .swap-on {
    opacity: 1;
  }
  
  .swap input:checked ~ .swap-off {
    opacity: 0;
  }
  
  /* 翻转效果 */
  .swap-flip .swap-on,
  .swap-flip .swap-off {
    transform-style: preserve-3d;
    backface-visibility: hidden;
    perspective: 600px;
    transform: rotateX(0deg);
    transition-property: transform, opacity;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 300ms;
  }
  
  .swap-flip .swap-on {
    opacity: 1;
    transform: rotateX(180deg);
  }
  
  .swap-flip input:checked ~ .swap-on {
    transform: rotateX(0deg);
  }
  
  .swap-flip input:checked ~ .swap-off {
    transform: rotateX(-180deg);
  }
</style> 
                        

                            <section class="flex flex-col items-center justify-center p-8 gap-12">
  <h2 class="text-2xl font-bold text-center mb-6">Swap组件变体组合展示</h2>
  
  <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
    <!-- 卡片1：主题切换 -->
    <div class="p-6 bg-white rounded-lg shadow-md flex flex-col items-center">
      <h3 class="text-lg font-semibold mb-4">主题切换</h3>
      <label class="swap swap-rotate">
        <input type="checkbox" />
        <svg class="swap-on w-10 h-10 fill-current text-yellow-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
          <path d="M5.64,17l-.71.71a1,1,0,0,0,0,1.41,1,1,0,0,0,1.41,0l.71-.71A1,1,0,0,0,5.64,17ZM5,12a1,1,0,0,0-1-1H3a1,1,0,0,0,0,2H4A1,1,0,0,0,5,12Zm7-7a1,1,0,0,0,1-1V3a1,1,0,0,0-2,0V4A1,1,0,0,0,12,5ZM5.64,7.05a1,1,0,0,0,.7.29,1,1,0,0,0,.71-.29,1,1,0,0,0,0-1.41l-.71-.71A1,1,0,0,0,4.93,6.34Zm12,.29a1,1,0,0,0,.7-.29l.71-.71a1,1,0,1,0-1.41-1.41L17,5.64a1,1,0,0,0,0,1.41A1,1,0,0,0,17.66,7.34ZM21,11H20a1,1,0,0,0,0,2h1a1,1,0,0,0,0-2Zm-9,8a1,1,0,0,0-1,1v1a1,1,0,0,0,2,0V20A1,1,0,0,0,12,19ZM18.36,17A1,1,0,0,0,17,18.36l.71.71a1,1,0,0,0,1.41,0,1,1,0,0,0,0-1.41ZM12,6.5A5.5,5.5,0,1,0,17.5,12,5.51,5.51,0,0,0,12,6.5Zm0,9A3.5,3.5,0,1,1,15.5,12,3.5,3.5,0,0,1,12,15.5Z" />
        </svg>
        <svg class="swap-off w-10 h-10 fill-current text-slate-700" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
          <path d="M21.64,13a1,1,0,0,0-1.05-.14,8.05,8.05,0,0,1-3.37.73A8.15,8.15,0,0,1,9.08,5.49a8.59,8.59,0,0,1,.25-2A1,1,0,0,0,8,2.36,10.14,10.14,0,1,0,22,14.05,1,1,0,0,0,21.64,13Zm-9.5,6.69A8.14,8.14,0,0,1,7.08,5.22v.27A10.15,10.15,0,0,0,17.22,15.63a9.79,9.79,0,0,0,2.1-.22A8.11,8.11,0,0,1,12.14,19.73Z" />
        </svg>
      </label>
      <p class="mt-4 text-sm text-gray-600 text-center">
        带旋转效果的明/暗主题切换
      </p>
    </div>
    
    <!-- 卡片2：情绪表情切换 -->
    <div class="p-6 bg-white rounded-lg shadow-md flex flex-col items-center">
      <h3 class="text-lg font-semibold mb-4">情绪表情</h3>
      <label class="swap swap-flip text-8xl">
        <input type="checkbox" />
        <div class="swap-on">😊</div>
        <div class="swap-off">😢</div>
      </label>
      <p class="mt-4 text-sm text-gray-600 text-center">
        带翻转效果的情绪表情切换
      </p>
    </div>
    
    <!-- 卡片3：功能按钮切换 -->
    <div class="p-6 bg-white rounded-lg shadow-md flex flex-col items-center">
      <h3 class="text-lg font-semibold mb-4">功能按钮</h3>
      <div class="flex gap-4">
        <label class="swap">
          <input type="checkbox" />
          <div class="swap-on px-4 py-2 bg-red-500 text-white rounded-lg">停止</div>
          <div class="swap-off px-4 py-2 bg-green-500 text-white rounded-lg">开始</div>
        </label>
        <label class="swap">
          <input type="checkbox" />
          <div class="swap-on px-4 py-2 bg-gray-200 text-gray-800 rounded-lg">隐藏</div>
          <div class="swap-off px-4 py-2 bg-blue-500 text-white rounded-lg">显示</div>
        </label>
      </div>
      <p class="mt-4 text-sm text-gray-600 text-center">
        功能按钮状态切换
      </p>
    </div>
  </div>
  
  <!-- 带翻转的媒体控制条 -->
  <div class="mt-8 p-6 bg-gray-800 rounded-lg shadow-lg w-full max-w-md">
    <div class="flex items-center justify-between">
      <div class="text-white">
        <div class="font-bold">正在播放</div>
        <div class="text-gray-400">轻音乐 - 放松时刻</div>
      </div>
      
      <div class="flex items-center gap-4">
        <!-- 上一曲按钮 -->
        <button class="text-white">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <polygon points="19 20 9 12 19 4 19 20"></polygon>
            <line x1="5" y1="19" x2="5" y2="5"></line>
          </svg>
        </button>
        
        <!-- 播放/暂停切换 -->
        <label class="swap swap-rotate">
          <input type="checkbox" />
          <svg class="swap-off fill-current text-white" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24">
            <path d="M8 5v14l11-7z" />
          </svg>
          <svg class="swap-on fill-current text-white" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24">
            <path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z" />
          </svg>
        </label>
        
        <!-- 下一曲按钮 -->
        <button class="text-white">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <polygon points="5 4 15 12 5 20 5 4"></polygon>
            <line x1="19" y1="5" x2="19" y2="19"></line>
          </svg>
        </button>
        
        <!-- 音量控制 -->
        <label class="swap">
          <input type="checkbox" />
          <svg class="swap-on w-6 h-6 fill-current text-white" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
            <path d="M3,9H7L12,4V20L7,15H3V9M16.59,12L14,9.41L15.41,8L18,10.59L20.59,8L22,9.41L19.41,12L22,14.59L20.59,16L18,13.41L15.41,16L14,14.59L16.59,12Z" />
          </svg>
          <svg class="swap-off w-6 h-6 fill-current text-white" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
            <path d="M14,3.23V5.29C16.89,6.15 19,8.83 19,12C19,15.17 16.89,17.84 14,18.7V20.77C18,19.86 21,16.28 21,12C21,7.72 18,4.14 14,3.23M16.5,12C16.5,10.23 15.5,8.71 14,7.97V16C15.5,15.29 16.5,13.76 16.5,12M3,9V15H7L12,20V4L7,9H3Z" />
          </svg>
        </label>
      </div>
    </div>
  </div>
</section>

<style>
  .swap {
    position: relative;
    display: inline-grid;
    cursor: pointer;
    user-select: none;
  }
  
  .swap > * {
    grid-column-start: 1;
    grid-row-start: 1;
    transition-property: opacity, transform;
    transition-duration: 300ms;
    transition-timing-function: ease-in-out;
  }
  
  .swap input {
    appearance: none;
    position: absolute;
    opacity: 0;
  }
  
  .swap .swap-on,
  .swap .swap-off {
    display: grid;
    place-items: center;
  }
  
  .swap .swap-on {
    opacity: 0;
  }
  
  .swap input:checked ~ .swap-on {
    opacity: 1;
  }
  
  .swap input:checked ~ .swap-off {
    opacity: 0;
  }
  
  /* 旋转效果 */
  .swap-rotate .swap-on,
  .swap-rotate .swap-off {
    transform-style: preserve-3d;
    backface-visibility: hidden;
    transform: rotateY(0deg);
  }
  
  .swap-rotate .swap-on {
    transform: rotateY(180deg);
  }
  
  .swap-rotate input:checked ~ .swap-on {
    transform: rotateY(0deg);
  }
  
  .swap-rotate input:checked ~ .swap-off {
    transform: rotateY(-180deg);
  }
  
  /* 翻转效果 */
  .swap-flip .swap-on,
  .swap-flip .swap-off {
    transform-style: preserve-3d;
    backface-visibility: hidden;
    perspective: 600px;
    transform: rotateX(0deg);
    transition-property: transform, opacity;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 300ms;
  }
  
  .swap-flip .swap-on {
    opacity: 1;
    transform: rotateX(180deg);
  }
  
  .swap-flip input:checked ~ .swap-on {
    transform: rotateX(0deg);
  }
  
  .swap-flip input:checked ~ .swap-off {
    transform: rotateX(-180deg);
  }
  
  /* 激活类控制状态 */
  .swap.swap-active .swap-on {
    opacity: 1;
  }
  
  .swap.swap-active .swap-off {
    opacity: 0;
  }
</style> 
                        

                            <section class="flex flex-col items-center justify-center p-8 gap-8">
  <div class="flex items-center gap-8">
    <!-- 默认状态的交换组件 -->
    <label class="swap text-6xl">
      <div class="swap-on">🥵</div>
      <div class="swap-off">🥶</div>
    </label>
    
    <!-- 带 swap-active 类的激活状态交换组件 -->
    <label class="swap swap-active text-6xl">
      <div class="swap-on">🥳</div>
      <div class="swap-off">😭</div>
    </label>
  </div>
  
  <div class="mt-6 p-4 bg-gray-100 rounded-lg">
    <p class="text-gray-700 mb-4">通过 JavaScript 切换 swap-active 类：</p>
    <div class="flex gap-4 items-center">
      <label id="theme-swap" class="swap text-6xl">
        <div class="swap-on">🌙</div>
        <div class="swap-off">☀️</div>
      </label>
      
      <button id="toggleBtn" class="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 transition">
        切换主题
      </button>
    </div>
  </div>
</section>

<style>
  .swap {
    position: relative;
    display: inline-grid;
    cursor: pointer;
    user-select: none;
  }
  
  .swap > * {
    grid-column-start: 1;
    grid-row-start: 1;
    transition-property: opacity, transform;
    transition-duration: 300ms;
    transition-timing-function: ease-in-out;
  }
  
  .swap .swap-on,
  .swap .swap-off {
    display: grid;
    place-items: center;
  }
  
  .swap .swap-on {
    opacity: 0;
  }
  
  .swap .swap-off {
    opacity: 1;
  }
  
  /* 激活类控制状态 */
  .swap.swap-active .swap-on {
    opacity: 1;
  }
  
  .swap.swap-active .swap-off {
    opacity: 0;
  }
</style>

<script>
  // 通过JavaScript控制swap-active类
  document.getElementById('toggleBtn').addEventListener('click', function() {
    const themeSwap = document.getElementById('theme-swap');
    themeSwap.classList.toggle('swap-active');
  });
</script>