Swap Text

                    <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>