<label class="radikalwp-tgl-neon"><input type="checkbox" checked><span class="radikalwp-tgl-neon-track"><span class="radikalwp-tgl-neon-knob"><//span><//span><//label>
.radikalwp-tgl-neon { display: inline-block; cursor: pointer; }
.radikalwp-tgl-neon input { position: absolute; opacity: 0; }
.radikalwp-tgl-neon-track {
display: block;
width: 52px;
height: 28px;
padding: 3px;
background: #1e293b;
border: 1px solid #334155;
border-radius: 999px;
transition: background .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.radikalwp-tgl-neon-knob {
display: block;
width: 20px;
height: 20px;
border-radius: 50%;
background: #64748b;
transition: transform .3s cubic-bezier(.34, 1.56, .64, 1), background .3s ease, box-shadow .3s ease;
}
.radikalwp-tgl-neon input:checked + .radikalwp-tgl-neon-track {
background: #0f2b33;
border-color: #22d3ee;
box-shadow: inset 0 0 10px rgba(34, 211, 238, .25);
}
.radikalwp-tgl-neon input:checked + .radikalwp-tgl-neon-track .radikalwp-tgl-neon-knob {
transform: translateX(-24px);
background: #22d3ee;
box-shadow: 0 0 12px rgba(34, 211, 238, .8);
}
درباره این اسنیپت
سوییچ تیرهای که در حالت روشن، دستگیره آن با هاله نئون فیروزهای میدرخشد و مسیر داخلی کمی روشنتر میشود. حس گیمینگ و پنلهای کنترل شبانه دارد و برای تمهای تیره و رابطهای ابزار مناسب است. گذار دستگیره با منحنی فنری، تعامل را لذتبخش میکند. بدون هیچ جاوااسکریپتی با checkbox بومی کار میکند.
پرسشهای متداول
منحنی cubic-bezier با مقدار بیش از یک در بخش دوم، اورشوت کوچکی میسازد که دستگیره مثل فنر از هدف رد و برگردد؛ حس لمسی واقعی میدهد.
چون transform از راست به چپ منفی است، در صفحه RTL دستگیره به سمت چپ (پایان مسیر) میرود؛ برای LTR مقدار را مثبت کنید.
بله؛ چکباکس واقعی فقط نامرئی است، با Tab فوکوس میگیرد و با Space تغییر میکند؛ برای نشان فوکوس میتوانید outline روی track با :focus-visible بدهید.
امتیاز شما به این محتوا
میانگین امتیاز کاربران: ۴.۲ از ۷ رأی — برای امتیازدهی وارد شوید
دیدگاهها (۰)
هنوز دیدگاهی ثبت نشده؛ اولین نفر باشید!