پیشنمایش زنده
کد HTML
<div class="relative flex items-center justify-center">
<input class="peer hidden" type="checkbox" id="toggle" />
<label
class="absolute z-10 flex size-[3.2rem] cursor-pointer items-center justify-center rounded-full border bg-black duration-500 peer-checked:rotate-45 peer-checked:bg-red-500"
for="toggle"
>
<svg class="fill-white" viewBox="0 0 0.6 0.6" height="20" width="20">
<path
d="M.325.275H.55v.05H.325V.55h-.05V.325H.05v-.05h.225V.05h.05z"
fill-rule="evenodd"
></path>
</svg>
</label>
<div
class="absolute flex size-12 cursor-pointer items-center justify-center rounded-full border bg-[#000000a2] duration-500 hover:scale-110 hover:bg-[#0000] peer-checked:-translate-x-16 peer-checked:-translate-y-16 peer-checked:delay-[0ms]"
>
<svg class="fill-white" viewBox="0 0 0.6 0.6" height="20" width="20">
<path
d="M0.541 0.325a0.025 0.025 0 0 0 -0.026 -0.004 0.201 0.201 0 0 1 -0.084 0.018 0.204 0.204 0 0 1 -0.204 -0.203 0.215 0.215 0 0 1 0.006 -0.05A0.025 0.025 0 0 0 0.2 0.059a0.254 0.254 0 1 0 0.35 0.292 0.025 0.025 0 0 0 -0.009 -0.026m-0.238 0.167A0.204 0.204 0 0 1 0.177 0.131v0.007a0.254 0.254 0 0 0 0.254 0.254 0.245 0.245 0 0 0 0.053 -0.006 0.203 0.203 0 0 1 -0.179 0.108Z"
></path>
</svg>
</div>
<div
class="absolute flex size-12 cursor-pointer items-center justify-center rounded-full border bg-[#000000a2] duration-500 hover:scale-110 hover:bg-[#0000] peer-checked:-translate-y-16 peer-checked:delay-[75ms]"
>
<svg class="fill-white" viewBox="0 0 0.6 0.6" height="20" width="20">
<path
d="M0.209 0.45 0.09 0.545A0.025 0.025 0 0 1 0.05 0.525V0.125A0.075 0.075 0 0 1 0.125 0.05h0.35A0.075 0.075 0 0 1 0.55 0.125v0.25a0.075 0.075 0 0 1 -0.075 0.075zM0.1 0.473 0.185 0.405A0.025 0.025 0 0 1 0.2 0.4h0.275A0.025 0.025 0 0 0 0.5 0.375V0.125A0.025 0.025 0 0 0 0.475 0.1H0.125A0.025 0.025 0 0 0 0.1 0.125z"
fill-rule="evenodd"
></path>
</svg>
</div>
<div
class="absolute flex size-12 cursor-pointer items-center justify-center rounded-full border bg-[#000000a2] duration-500 hover:scale-110 hover:bg-[#0000] peer-checked:-translate-y-16 peer-checked:translate-x-16 peer-checked:delay-[100ms]"
>
<svg class="fill-white" viewBox="0 0 0.6 0.6" height="20" width="20">
<path
d="M.475.163H.443L.435.138a.075.075 0 0 0-.071-.05H.236a.075.075 0 0 0-.071.051L.157.164H.125A.075.075 0 0 0 .05.239v.2a.075.075 0 0 0 .075.075h.35A.075.075 0 0 0 .55.439v-.2A.075.075 0 0 0 .475.163M.5.438a.025.025 0 0 1-.025.025h-.35A.025.025 0 0 1 .1.438v-.2A.025.025 0 0 1 .125.213h.05A.025.025 0 0 0 .2.196L.214.155A.03.03 0 0 1 .238.138h.128A.03.03 0 0 1 .39.155l.014.041a.03.03 0 0 0 .023.017h.05a.025.025 0 0 1 .025.025ZM.3.213a.1.1 0 1 0 .1.1.1.1 0 0 0-.1-.1m0 .15a.05.05 0 1 1 .05-.05.05.05 0 0 1-.05.05"
></path>
</svg>
</div>
<div
class="absolute flex size-12 cursor-pointer items-center justify-center rounded-full border bg-[#000000a2] duration-500 hover:scale-110 hover:bg-[#0000] peer-checked:translate-x-16 peer-checked:delay-[125ms]"
>
<svg class="fill-white" viewBox="0 0 0.6 0.6" height="20" width="20">
<path
d="M.3.1a.2.2 0 1 0 0 .4.2.2 0 0 0 0-.4M.05.3a.25.25 0 1 1 .5 0 .25.25 0 0 1-.5 0M.3.15a.025.025 0 0 1 .025.025V.29l.068.068a.025.025 0 0 1-.035.035L.283.318A.03.03 0 0 1 .275.3V.175A.025.025 0 0 1 .3.15"
></path>
</svg>
</div>
<div
class="absolute flex size-12 cursor-pointer items-center justify-center rounded-full border bg-[#000000a2] duration-500 hover:scale-110 hover:bg-[#0000] peer-checked:translate-x-16 peer-checked:translate-y-16 peer-checked:delay-[150ms]"
>
<svg class="fill-white" viewBox="0 0 0.6 0.6" height="20" width="20">
<path
d="M.175.25A.025.025 0 1 0 .2.275.025.025 0 0 0 .175.25m.3-.1H.45V.075A.025.025 0 0 0 .425.05h-.25A.025.025 0 0 0 .15.075V.15H.125A.075.075 0 0 0 .05.225v.15A.075.075 0 0 0 .125.45H.15v.075A.025.025 0 0 0 .175.55h.25A.025.025 0 0 0 .45.525V.45h.025A.075.075 0 0 0 .55.375v-.15A.075.075 0 0 0 .475.15M.2.1h.2v.05H.2Zm.2.4H.2V.4h.2ZM.5.375A.025.025 0 0 1 .475.4H.45V.375A.025.025 0 0 0 .425.35h-.25A.025.025 0 0 0 .15.375V.4H.125A.025.025 0 0 1 .1.375v-.15A.025.025 0 0 1 .125.2h.35A.025.025 0 0 1 .5.225Z"
></path>
</svg>
</div>
<div
class="absolute flex size-12 cursor-pointer items-center justify-center rounded-full border bg-[#000000a2] duration-500 hover:scale-110 hover:bg-[#0000] peer-checked:translate-y-16 peer-checked:delay-[175ms]"
>
<svg class="fill-white" viewBox="0 0 0.4 0.4" height="20" width="20">
<path
d="M.2.125H.175V.25h.1V.225L.202.227zM.137.022A.053.053 0 0 0 .066.008l-.024.02a.05.05 0 0 0-.005.071zm.222.006L.334.009a.05.05 0 0 0-.07.013l.099.077A.05.05 0 0 0 .375.066.05.05 0 0 0 .359.028"
></path>
<path
d="M.322.35A.18.18 0 0 0 .375.225.176.176 0 0 0 .2.05a.176.176 0 0 0-.175.175.18.18 0 0 0 .053.125L.055.374a.016.016 0 0 0 .022.022L.102.371q.041.03.098.03C.257.401.27.39.298.37l.024.025A.016.016 0 0 0 .344.373zM.072.225A.13.13 0 0 1 .2.097a.13.13 0 0 1 .128.128A.13.13 0 0 1 .2.353.13.13 0 0 1 .072.225"
></path>
</svg>
</div>
<div
class="absolute flex size-12 cursor-pointer items-center justify-center rounded-full border bg-[#000000a2] duration-500 hover:scale-110 hover:bg-[#0000] peer-checked:-translate-x-16 peer-checked:translate-y-16 peer-checked:delay-[200ms]"
>
<svg class="fill-white" viewBox="0 0 0.6 0.6" height="20" width="20">
<path
d="M.497.317a.025.025 0 0 1 0-.033L.529.248A.03.03 0 0 0 .532.219L.482.132A.03.03 0 0 0 .455.12L.408.13A.025.025 0 0 1 .379.113L.364.067A.03.03 0 0 0 .34.05h-.1a.025.025 0 0 0-.025.017L.201.113A.025.025 0 0 1 .172.13L.125.12A.03.03 0 0 0 .1.132L.05.218a.03.03 0 0 0 .003.029l.032.036a.025.025 0 0 1 0 .033L.053.353A.03.03 0 0 0 .05.382L.1.469a.03.03 0 0 0 .027.012l.047-.01a.025.025 0 0 1 .029.017l.015.046a.025.025 0 0 0 .025.017h.1A.03.03 0 0 0 .367.534L.382.488A.025.025 0 0 1 .411.471l.047.01A.03.03 0 0 0 .485.469l.05-.087A.03.03 0 0 0 .532.353ZM.46.35l.02.023-.032.056L.419.423a.075.075 0 0 0-.086.05L.323.5H.259L.25.472a.075.075 0 0 0-.086-.05L.135.428.102.373.122.35a.075.075 0 0 0 0-.1L.102.227.134.172l.029.006a.075.075 0 0 0 .086-.05L.259.1h.064l.01.028a.075.075 0 0 0 .086.05L.448.172.48.228.46.251a.075.075 0 0 0 0 .1M.291.201a.1.1 0 1 0 .1.1.1.1 0 0 0-.1-.1m0 .15a.05.05 0 1 1 .05-.05.05.05 0 0 1-.05.05"
></path>
</svg>
</div>
<div
class="absolute flex size-12 cursor-pointer items-center justify-center rounded-full border bg-[#000000a2] duration-500 hover:scale-110 hover:bg-[#0000] peer-checked:-translate-x-16 peer-checked:delay-[225ms]"
>
<svg class="fill-white" viewBox="0 0 0.6 0.6" height="20" width="20">
<path
d="M.151.468A.22.22 0 0 0 .3.525.22.22 0 0 0 .449.469C.442.442.389.425.3.425S.158.442.151.469M.115.429C.143.391.209.375.3.375s.157.016.185.053a.225.225 0 1 0-.37 0M.3.575a.275.275 0 1 1 0-.55.275.275 0 0 1 0 .55M.2.25c0-.056.04-.1.1-.1s.1.048.1.105c0 .082-.045.12-.1.12S.2.336.2.25m.05 0c0 .057.02.075.05.075.029 0 .05-.018.05-.07C.35.224.33.2.3.2.268.2.25.22.25.25"
fill-rule="evenodd"
></path>
</svg>
</div>
</div>
کد CSS
.absolute {
position: absolute;
}
.relative {
position: relative;
}
.z-10 {
z-index: 10;
}
.flex {
display: flex;
}
.hidden {
display: none;
}
.size-12 {
width: 3rem;
height: 3rem;
}
.size-\[3\.2rem\] {
width: 3.2rem;
height: 3.2rem;
}
.cursor-pointer {
cursor: pointer;
}
.items-center {
align-items: center;
}
.justify-center {
justify-content: center;
}
.rounded-full {
border-radius: 9999px;
}
.border {
border-width: 1px;
}
.bg-\[\#000000a2\] {
background-color: #000000a2;
}
.bg-black {
--tw-bg-opacity: 1;
background-color: rgb(0 0 0 / var(--tw-bg-opacity));
}
.fill-white {
fill: #fff;
}
.duration-500 {
transition-duration: 500ms;
}
.hover\:scale-110:hover {
--tw-scale-x: 1.1;
--tw-scale-y: 1.1;
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));
}
.hover\:bg-\[\#0000\]:hover {
background-color: #0000;
}
.peer:checked ~ .peer-checked\:-translate-x-16 {
--tw-translate-x: -4rem;
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-16 {
--tw-translate-y: -4rem;
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-x-16 {
--tw-translate-x: 4rem;
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-16 {
--tw-translate-y: 4rem;
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\:rotate-45 {
--tw-rotate: 45deg;
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\:bg-red-500 {
--tw-bg-opacity: 1;
background-color: rgb(239 68 68 / var(--tw-bg-opacity));
}
.peer:checked ~ .peer-checked\:delay-\[0ms\] {
transition-delay: 0ms;
}
.peer:checked ~ .peer-checked\:delay-\[100ms\] {
transition-delay: 100ms;
}
.peer:checked ~ .peer-checked\:delay-\[125ms\] {
transition-delay: 125ms;
}
.peer:checked ~ .peer-checked\:delay-\[150ms\] {
transition-delay: 150ms;
}
.peer:checked ~ .peer-checked\:delay-\[175ms\] {
transition-delay: 175ms;
}
.peer:checked ~ .peer-checked\:delay-\[200ms\] {
transition-delay: 200ms;
}
.peer:checked ~ .peer-checked\:delay-\[225ms\] {
transition-delay: 225ms;
}
.peer:checked ~ .peer-checked\:delay-\[75ms\] {
transition-delay: 75ms;
}