如何使用 Tailwind CSS 构建动画汉堡菜单？ [已关闭]

Question

如何使用 Tailwind CSS 构建动画汉堡菜单？

<label class="relative w-10 h-8 cursor-pointer block">
            <input type="checkbox" id="burger" class="peer/burger hidden" />
            <span class=" absolute  peer-checked/burger:origin-center peer-checked/burger:rotate-45 peer-checked/burger:top-[14px ] h-1 w-full bg-black rounded-full transition-transform duration-250 ease-in-out"></span>
            <span class="peer-checked/burger:hidden absolute h-1 w-full bg-black rounded-full transition-transform duration-250 ease-in-out top-1/2 transform -translate-y-1/2"></span>
            <span class="peer-checked/burger:origin-center peer-checked/burger:-rotate-45 peer-checked/burger:top-[14px] absolute h-1 w-full bg-black rounded-full transition-transform duration-250 ease-in-out bottom-0"></span>
</label>

这是正确的代码

<label class="relative w-10 h-8 cursor-pointer block">
            <input type="checkbox" id="burger" class="peer/burger hidden" />
            <span class=" absolute  peer-checked/burger:origin-center peer-checked/burger:rotate-45 peer-checked/burger:top-[14px ] h-1 w-full bg-black rounded-full transition-transform duration-250 ease-in-out"></span>
            <span class="peer-checked/burger:hidden absolute h-1 w-full bg-black rounded-full transition-transform duration-250 ease-in-out top-1/2 transform -translate-y-1/2"></span>
            <span class="peer-checked/burger:origin-center peer-checked/burger:-rotate-45 peer-checked/burger:top-[14px] absolute h-1 w-full bg-black rounded-full transition-transform duration-250 ease-in-out bottom-0"></span>
`

Answer 1

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.production.min.js"></script>
<label class="relative w-10 h-8 cursor-pointer block">
            <input type="checkbox" id="burger" class="peer/burger hidden" />
            <span class=" absolute  peer-checked/burger:origin-center peer-checked/burger:rotate-45 peer-checked/burger:top-[14px ] h-1 w-full bg-black rounded-full transition-transform duration-250 ease-in-out"></span>
            <span class="peer-checked/burger:hidden absolute h-1 w-full bg-black rounded-full transition-transform duration-250 ease-in-out top-1/2 transform -translate-y-1/2"></span>
            <span class="peer-checked/burger:origin-center peer-checked/burger:-rotate-45 peer-checked/burger:top-[14px] absolute h-1 w-full bg-black rounded-full transition-transform duration-250 ease-in-out bottom-0"></span>
</label>