סגנון משלך תיבת הסימון אנימציה אפקטים עם

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

כי הספרייה בחינם שוחרר על ידי 720kb וראה במהירות אלטרנטיבה מעקב בשם Checkbox.css. זה עובד בצורה דומה, חוץ מזה resyles ו animates תיבות HTML.

ספריה זו באה כמו חבילה של ספריות עם שלוש מטרות נפרדותYou

1. Radiobox.css - אנימציות רדיו מותאמות אישית
2. Checkbox.css - תיבת סימון מותאמת אישית אנימציות
3. Checked.css - סגנונות & אנימציות אלמנטים קיימים שנבחרו (רדיו & תיבות)

כל אלה פותחו על ידי אותו צוות והם עובדים באופן דומה. אבל תצטרך כל ספריה בנפרד אם אתה רוצה לקבל את כל ההשפעות.

הצצה אל תיבת הסימון Checkbox.css GitHub כדי לראות חלק מהתכונות האלה וכיצד הן פועלות. כברירת מחדל, הם מסתמכים על 2D הופך יחד עם מעברים CSS, בהתאם לתמיכה בדפדפן.

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

התהליך לא יכול להיות פשוט יותר דורש מעט אל ללא קידוד ידע (למרות שזה תמיד שימושי כדי לקבל קצת).

לאחר שגיליון הסגנונות של CSS מופיע בדף שלך, הוסף רק מחלקה לתיבת הסימון בפורמט תיבת סימון x איפה ה “איקס” מייצג כל מה שאתה רוצה אנימציה. לדוגמה, הנה הקוד עבור “לקפוץ” אפקט הנפשה:

החלק הכי טוב הוא איך הספרייה הזאת יכולה לעבוד יחד עם פורמט לחצן הבחירה, מדי. אני בהחלט ממליץ על ספריית Checked.css אם אתה רוצה הנפשת אלמנטים קיימים.

אל תתנו את כל התלות האלה להפחיד אותך. די הרבה אנשים יכולים להגדיר את ספריית Checkbox.css או את כל הספריות הקשורות, הכל מאפס עם עותק קטן & הדבקה.

בנוסף, אם יש לך שאלות או הצעות עבור חבילה זו של ספריות קלט קלט נסה הודעות היוצרים דרך האתר שלהם או בטוויטר @ 720kb_.