پیشنمایش زنده (iframe sandbox)
تمامصفحه
<label class="radikalwp-tgl-spring"><input type="checkbox"><span class="radikalwp-tgl-spring-track"><span class="radikalwp-tgl-spring-knob"><//span><//span><//label>
.radikalwp-tgl-spring { display: inline-block; cursor: pointer; }
.radikalwp-tgl-spring input { position: absolute; opacity: 0; }
.radikalwp-tgl-spring-track {
display: block;
width: 72px;
height: 40px;
padding: 4px;
background: #cbd5e1;
border-radius: 999px;
transition: background .3s ease;
}
.radikalwp-tgl-spring-knob {
display: block;
width: 32px;
height: 32px;
border-radius: 50%;
background: #fff;
box-shadow: 0 3px 8px rgba(15, 23, 42, .3);
transition: transform .45s cubic-bezier(.68, -0.4, .32, 1.4);
}
.radikalwp-tgl-spring input:checked + .radikalwp-tgl-spring-track { background: #4f46e5; }
.radikalwp-tgl-spring input:checked + .radikalwp-tgl-spring-track .radikalwp-tgl-spring-knob {
transform: translateX(-32px);
}
.radikalwp-tgl-spring input:focus-visible + .radikalwp-tgl-spring-track {
outline: 3px solid rgba(79, 70, 229, .4);
outline-offset: 2px;
}
درباره این اسنیپت
سوییچ درشت با دستگیره بزرگ و بازگشت فنری قوی برای جایی که هدف لمسی مهم است؛ کیوسک لمسی، اپ تبلت و تنظیمات دسترسی. مسیر بلندتر و دستگیره ۳۲ پیکسلی، لمس دقیق را آسان میکند. حرکت با منحنی اورشوت قوی، حس فنر واقعی میدهد. برای حالتهای خاموش/روشن مهم مثل قطع صدا مناسب است.
پرسشهای متداول
بله؛ قاعده :focus-visible یک حلقه بیرونی برای ناوبری کیبورد میکشد و روی کلیک موس ظاهر نمیشود؛ دسترسپذیری و زیبایی هر دو حفظ شدهاند.
منحنی با مقادیر منفی و بیش از یک، کشش واقعی فنر را شبیهسازی میکند؛ اگر ملایمتر میخواهید اعداد y2 و y1 را به صفر نزدیک کنید.
همه اعداد را به نسبت (مثلاً 1.5 برابر) تغییر دهید: عرض 108، ارتفاع 60 و دستگیره 48؛ متناسببودن نسبتها مهم است نه مقدار مطلق.
امتیاز شما به این محتوا
میانگین امتیاز کاربران: ۴.۵ از ۱۲ رأی — برای امتیازدهی وارد شوید
دیدگاهها (۰)
هنوز دیدگاهی ثبت نشده؛ اولین نفر باشید!