پیشنمایش زنده
کد HTML
<label
class="w-16 h-8 bg-black shadow-inner rounded-full flex justify-around items-center overflow-hidden outline outline-2 outline-offset-2"
>
<input class="peer hidden" type="checkbox" />
<div
class="w-6 h-6 flex justify-center items-center text-white bg-black border-[2px] duration-500 rounded-full peer-checked:translate-y-8"
></div>
<div
class="w-6 h-6 flex justify-center items-center text-white duration-500 rounded-full -translate-y-8 peer-checked:translate-y-0 rotate-90"
>
𝝞
</div>
</label>
کد CSS
.flex {
display: flex;
}
.hidden {
display: none;
}
.h-6 {
height: 1.5rem;
}
.h-8 {
height: 2rem;
}
.w-16 {
width: 4rem;
}
.w-6 {
width: 1.5rem;
}
.-translate-y-8 {
--tw-translate-y: -2rem;
transform: translate(var(--tw-translate-x), var(--tw-translate-y))
rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.rotate-90 {
--tw-rotate: 90deg;
transform: translate(var(--tw-translate-x), var(--tw-translate-y))
rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.items-center {
align-items: center;
}
.justify-center {
justify-content: center;
}
.justify-around {
justify-content: space-around;
}
.overflow-hidden {
overflow: hidden;
}
.rounded-full {
border-radius: 9999px;
}
.border-\[2px\] {
border-width: 2px;
}
.bg-black {
--tw-bg-opacity: 1;
background-color: rgb(0 0 0 / var(--tw-bg-opacity));
}
.text-white {
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity));
}
.shadow-inner {
--tw-shadow: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
--tw-shadow-colored: inset 0 2px 4px 0 var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),
var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.outline {
outline-style: solid;
}
.outline-2 {
outline-width: 2px;
}
.outline-offset-2 {
outline-offset: 2px;
}
.duration-500 {
transition-duration: 500ms;
}
.peer:checked ~ .peer-checked\:translate-y-0 {
--tw-translate-y: 0px;
transform: translate(var(--tw-translate-x), var(--tw-translate-y))
rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.peer:checked ~ .peer-checked\:translate-y-8 {
--tw-translate-y: 2rem;
transform: translate(var(--tw-translate-x), var(--tw-translate-y))
rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}