צור אלמנטים בודדים ספינרס ו Loaders עם CSSPIN

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

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

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

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

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

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

פשוט שים לב לקוד עושה שימוש בתחביר LESS, אז אתה צריך להכיר את השפה preprocessing לעשות את כל העריכות הגדולות.

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

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

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

כדי ללמוד עוד ולעיין בכל התיעוד, לבדוק את CSSPIN ריפו על GitHub. היוצר גם עשה קטן וידאו התקנה כי אתה יכול לצפות למטה.