نمط تأثيرات الرسوم المتحركة الخاصة بـ Checkbox الخاصة مع Checkbox.css

في منشور حديث ، غطيت مكتبة رسوم متحركة ممتعة لأزرار الراديو المخصصة, مدعوم من CSS.

تم إصدار هذه المكتبة المجانية من خلال 720 كيلو بايت وشاهدتها بسرعة بديل متابعة يسمى Checkbox.css. هذا يعمل بطريقة مماثلة ، إلا أنه تصفيف وتنشيط خانات HTML.

هذه المكتبة تأتي كمجموعة من المكتبات مع ثلاثة أغراض مميزة:

1. Radiobox.css - الرسوم المتحركة الراديو مخصصة
2. Checkbox.css - الرسوم المتحركة خانة الاختيار المخصصة
3. Checked.css - أنماط وتحريك العناصر المحددة الحالية (أجهزة الراديو وخانات الاختيار)

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

ألق نظرة سريعة على Checkbox.css GitHub لرؤية بعض هذه الميزات وكيفية عملها. بشكل افتراضي ، يعتمدون على 2D يتحول جنبا إلى جنب مع التحولات CSS, اعتمادا على دعم المتصفح.

لا تأتي أي من هذه المكتبات بطرق JS الاحتياطية ، لذا فهي حقًا تعمل فقط للرسوم المتحركة التي تعمل بنظام CSS. ولكن ، نظرة سريعة واحدة على صفحة العرض التوضيحي يجب أن تجعلك سعيدًا بإضافة هذه الرسوم المتحركة إلى صفحتك.

لا يمكن أن تكون العملية أسهل يتطلب معرفة الترميز القليل (على الرغم من أنه من المفيد دائمًا الحصول على بعض).

بمجرد ظهور ورقة أنماط CSS على صفحتك ، ما عليك سوى إضافة فصل دراسي إلى مربع الاختيار الخاص بك بالتنسيق مربع-X أين ال “س” يمثل أي الرسوم المتحركة التي تريدها. على سبيل المثال ، إليك رمز “قفز” تأثير الرسوم المتحركة:

أفضل جزء هو كيف يمكن لهذه المكتبة العمل جنبا إلى جنب مع شكل زر الراديو, جدا. أود أن أوصي بالتأكيد مكتبة Checked.css إذا كنت تريد تحريك العناصر المحددة الموجودة.

لا تدع كل هذه التبعيات تخيفك. يمكن لأي شخص إعداد مكتبة Checkbox.css أو أي من المكتبات ذات الصلة, كل ذلك من نقطة الصفر مع القليل من النسخ واللصق.

وإذا كانت لديك أسئلة أو اقتراحات لهذه الحزمة من مكتبات الرسوم المتحركة للمدخلات ، فحاول مراسلة المبدعين من خلال موقعهم أو على Twitter @ 720kb_.