خلق متعة أزرار الراديو المتحركة مع Radiobox.css

ال أزرار الراديو HTML5 الافتراضية ممل جدا. هناك طرق ل تخصيص لهم باستخدام CSS3 ، ولكن معظم التقنيات التركيز فقط على النظرات.

Radiobox.css يركز على تبدو و قلم المدقة إضافة الرسوم المتحركة CSS3 مخصصة لمدخلات الراديو.

هذه المكتبة هي مجانا تماما و المصدر المفتوح, متاح على جيثب للتنزيل. مع مكتبة CSS هذه ، يمكنك الاختيار من بينها أكثر من 12 الرسوم المتحركة المختلفة التي تنطبق على أزرار الراديو.

بدون أنماط CSS مخصصة ، سوف يظلون كذلك تبدو وكأنها مدخلات الراديو العادية. ولكن عندما ينقر المستخدم لتحديد زر سوف الحصول على تأثير الرسوم المتحركة مجنون. يمكنك ان ترى أمثلة حية على صفحة Radiobox الرئيسية التي تعرض كل نمط بجوار اسمه.

يمكنك تثبيت Radiobox مباشرة من npm أو كوخ في الريف, أو حتى تنزيل الملفات محليًا إلى جهازك. جيثب يستضيف جميع ملفاتهم في CDN إذا كنت تريد اللعب دون تحميل أي شيء.

الملف الوحيد الذي تحتاجه هو radiobox.min.css التي يجب أن تذهب الحق في رأس المستند الخاص بك. من هناك ، أنت فقط إضافة فصل بسيط لكل زر راديو اعتمادا على الرسوم المتحركة التي تريدها.

هنا أ مقتطف الشفرة ل “بوينغ” تأثير:

لاحظ ال “بوينغ” الرسوم المتحركة لديها ملف CSS الخاص به مسمي boing.min.css. هذه يجب أن تدرج إذا كنت تخطط لاستخدام هذا التأثير على الصفحة.

عند تنزيل Radiobox يجب عليك الحصول على دليل تجريبي مع العروض الحية لجميع هذه الآثار. يمكنك ببساطة نسخ / لصق الرمز مباشرة إلى صفحتك لجعلها تعمل دون متاعب.

إلى عن على وثائق كاملة, تفحص ال الريبو الرئيسي جنبا إلى جنب مع موقع عرض حي. إذا كنت تريد الاتصال بالمبدعين ، فيمكنك إرسال بريد إلكتروني من موقع 720kb أو رسالة عبر تويتر @ 720kb_.