mirror of
https://github.com/uiverse-io/galaxy.git
synced 2025-11-27 20:50:21 +08:00
19 lines
No EOL
865 B
HTML
19 lines
No EOL
865 B
HTML
<!-- From Uiverse.io by hoshikawamaki - Tags: simple, icon, animation, switch, toggle, animated, toggle switch, click animation -->
|
|
<label
|
|
for="nav_bar_icon"
|
|
class="w-9 h-10 cursor-pointer flex flex-col items-center justify-center space-y-1.5"
|
|
>
|
|
<input id="nav_bar_icon" type="checkbox" class="hidden peer" />
|
|
<div
|
|
class="w-2/3 h-1.5 bg-purple-400 rounded-lg transition-all duration-300 origin-right peer-checked:w-full peer-checked:rotate-[-30deg] peer-checked:translate-y-[-5px]"
|
|
></div>
|
|
<div
|
|
class="w-full h-1.5 bg-purple-400 rounded-lg transition-all duration-300 origin-center peer-checked:rotate-90 peer-checked:translate-x-4"
|
|
></div>
|
|
<div
|
|
class="w-2/3 h-1.5 bg-purple-400 rounded-lg transition-all duration-300 origin-right peer-checked:w-full peer-checked:rotate-[30deg] peer-checked:translate-y-[5px]"
|
|
></div>
|
|
</label>
|
|
|
|
|
|
|