ליצור כיף לחצני רדיו אנימציה עם

ה כפתורי ברירת מחדל של HTML5 הרדיו הם די משעממים. יש דרכים להתאים אותם באמצעות CSS3, אבל רוב הטכניקות להתמקד רק על נראה.

Radiobox.css מתמקד ב נראה ו בסגנון הוספת מותאמת אישית CSS3 אנימציות קלט רדיו.

ספריה זו לגמרי חופשי ו קוד פתוח, זמין ב - GitHub להורדה. באמצעות ספריית CSS זו, תוכל לבחור מתוך יותר מ -12 הנפשות שונות זה חל על לחצני הבחירה.

ללא סגנונות CSS מותאמים אישית, הם עדיין נראה כמו קלט רדיו רגיל. אבל כאשר המשתמש לוחץ כדי לבחור כפתור הם לקבל אפקט אנימציה מטורף. אתה יכול לראות דוגמאות חיות בדף הראשי Radiobox אשר הדגמות כל סגנון ליד שמו.

ניתן להתקין את Radiobox ישר מ npm או קשתות, או אפילו להוריד את הקבצים באופן מקומי למחשב שלך. GitHub מארח את כל הקבצים שלהם ב- CDN אם אתה רוצה לשחק בלי להוריד שום דבר.

הקובץ היחיד שאתה צריך הוא radiobox.min.css אשר צריך ללכת היי לתוך ראש המסמך שלך. משם, אתה פשוט להוסיף בכיתה פשוטה לכל כפתור רדיו בהתאם להנפשה הרצויה.

הנה קטע קוד בשביל ה “boing” השפעה:

הערה “boing” אנימציה יש קובץ CSS משלה שקוראים לו boing.min.css. זה יש לכלול אם בכוונתך להשתמש באפקט זה על הדף.

כאשר אתה מוריד Radiobox אתה צריך קבל מדריך הדגמה עם הדגמות חיות עבור כל ההשפעות האלה. אתה יכול פשוט להעתיק / להדביק את הקוד ישירות לדף שלך כדי לקבל את זה עובד ללא טרחה.

ל תיעוד מלא, לבדוק את ריפו ראשי ביחד איתי הדגמה חיה באתר. אם אתה רוצה ליצור קשר עם היוצרים שאתה יכול לשלוח דוא"ל מ 720kb אתר אינטרנט או הודעה דרך Twitter @ 720kb_.