24 הדגמות והדרכות האנימציה הטובות ביותר CSS3
היום אנו מציגים פוסט ב- CSS3 Animation הכולל כמה מהפונקציות הטובות והמדהימות ביותר. CSS3 מלא בתכונות מדהימות שאתה יכול לנצל אותן שאולי אינך יודע עליהן. זו הסיבה שאנחנו הולכים לעבור על כמה מאותם תכונות CSS3 שפחות נחקרות. אחת התכונות המדהימות ביותר שלה היא CSS3 Animation, שהיא מהנה ומעניקה אפקט מצוין. כל ההדרכות הללו שימושיות מאוד וחלקן אף יכולות לשמש כחלופות Javascript. בדוק את האנימציה הזו כדי לקבל קצת השראה לפרויקט שלך. אתה הולך לאהוב את מה שיש לנו להראות לך!
ייתכן שחלק מהאפקטים האלה של אנימציה CSS3 שתמצא להלן לא יהיו גלויים לך אם אתה משתמש בדפדפן Firefox. אם זה המצב, יהיה עליך להוריד דפדפן חלופי כדי לצפות ברשימה שלנו בשלמותה. אנו באופן אישי מציעים לך להשתמש ב- Google Chrome, מכיוון שהיא אחת החלופות הטובות ביותר ל- Firefox. מלבד זאת, תוכל להשתמש ב- Safari או אפילו ב- Internet Explorer. הבחירה תלויה בך לחלוטין. מצא דפדפן שמתאים להעדפותיך.
עם זאת, אנו מקווים שתיהנו מהרשימה שלנו 24 ההדגמות וההדרכות הטובות ביותר להנפשת CSS3.
הצג סמלים חברתיים בצורה יפה באמצעות CSS3
הדוגמה עובדת עם כל הדפדפנים מבוססי -אתרי אינטרנט (Safari ו- Chrome), אך גם ב- Firefox 4. המחבר כלל גם גרסת jQuery, שתשמש כצורה של “תאימות לאחור”. תוכל גם לראות כיצד ניתן להשיג את אותו אפקט באמצעות CSS ו- jQuery.
עוד על הצגת סמלים חברתיים בצורה יפה באמצעות CSS3
אנימציה תלת מימדית באמצעות CSS3 טהור
מאפיין הפרספקטיבה הוא מה שאנחנו צריכים כדי ליצור את אפקט התלת מימד. באמצעות טרנספורמציה ומעבר אנו יכולים ליצור הנפשה תלת מימדית באמצעות CSS3 טהור.
עוד על אנימציה תלת מימדית באמצעות CSS3 טהור
שעון צבעוני
צור jQuery צבעוני & שעון CSS, שיעזור לך לעקוב אחר השניות האחרונות היקרות של השנה.
מערכת דירוג צבעונית עם CSS3
אנו הולכים לעשות הדרכה פשוטה יחסית של jQuery. מערכות דירוג משמשות רבות באתרים, למשל כדי לדרג כמה טוב מוצר, מאמר או הערה מסוימים. מעט רציתי לשפר את הרעיון הזה, על ידי הפיכתו לאטרקטיבי יותר מבחינה ויזואלית.
עוד על מערכת דירוג צבעונית עם CSS3
מיקום צל דינאמי PNG & אֲטִימוּת
כאשר האור נדלק, המיקום והאטימות של צל הלוגו ישתנו באופן דינמי, בהתאם למיקום ולמרחק של הנורה. אל תשכח לגרור את הלוגו ו/או את הנורה!
עוד על מיקום צל דינאמי PNG & אֲטִימוּת
jQuery DJ Hero
על ידי שילוב CSS3 ו- jQuery, יצרתי שני רשומות שתוכל להתחיל לסובב (מהר ואיטי יותר) ואפילו אפשר לגרד. בגרסה עתידית, ניתן להשתמש בזה יחד עם צליל אמיתי (לגרסה זו אין צליל).
אפקטים של בוקה עם CSS3 ו- jQuery
הדרכה זו מלמדת אותך כיצד ליצור מחדש את אפקט הבוקה עם CSS 3. בעזרת קצת עזרה מ- jQuery, נוכל להוסיף קצת אקראיות בצבע, גודל ומיקום לאפקט..
עוד על אפקטים של בוקה עם CSS3 ו- jQuery
החלל הוא הגבול הסופי, נכון?
לא משנה כמה מהירים צינורות אינטרנט או שרתים, תמיד נזדקק לספינרים שיעידו שמשהו קורה מאחורי הקלעים. עד כה אנשים היו הולכים לאתר כלשהו, בוחרים באחת מהתבניות הזמינות, מתאימים את צבעי החזית והרקע שלהם ומורידים תמונת GIF יפה..
עוד על שטח הוא הגבול הסופי, נכון?
כיצד ליצור לוח הזזה אנכי סקסי באמצעות jQuery ו- CSS3
אז מה עם לוח הזזה אנכי שישמש כמגירה במקום לוח הזזה האופקי העליון הרגיל הדוחף את כל השאר כלפי מטה כאשר הוא נפתח? כשחשבתי על חלופות ללוחות האופקיים הרגילים, חשבתי שיהיה נחמד ליצור משהו שעובד בצורה דומה, אבל זה קצת יותר גמיש..
עוד על יצירת לוח הזזה אנכי סקסי באמצעות jQuery ו- CSS3
אנימציה ממסגרת למסגרת
ההדגמה הראשונה מחייבת אותך להמשיך ללחוץ על התמונה כדי לראות את המסגרת הבאה, והיא מתעטפת עד ההתחלה כאשר אתה מגיע למסגרת האחרונה. ההדגמה השנייה רק צריכה שתשאיר את העכבר מעבר לתמונה ברוב הדפדפנים. אבל החיסרון הגדול בשיטה זו הוא שמהירות התנועה של העכבר קובעת את מהירות האנימציה
שעון אנלוגי CSS3
שעון אנלוגי שנוצר באמצעות מעבר webkit והפיכת CSS. JavaScript משמש רק למשוך את הזמן הנוכחי.
Spotlight Cast Shadow
העבר את הסמן מעל התיבה כדי להטיל צל עם אור הזרקורים. הדגמה זו משתמשת במאפיין הטקסט של צל CSS, הנתמך ב- Safari, Firefox 3.5, Opera ו- Chrome.
א ב ג
ויניל הזזה עם CSS3
אנו לוקחים עטיפת אלבום סטנדרטית, מעט HTML וכמה מעברים ושינויי CSS3 ליצירת אפקט ויניל הזזה להצגת המוזיקה שאתה אוהב..
אפקטים מדהימים של ריחוף תמונות באמצעות Webkit ו- CSS
שטחים
עוד על אפקטים מדהימים של ריחוף תמונות באמצעות Webkit ו- CSS
השתמש ב- CSS3 ליצירת ערימה דינמית של כרטיסי אינדקס
ניצור ערימה דינמית של כרטיסי אינדקס אך ורק עם HTML ו- CSS3 ונשתמש בתכונות CSS3 כגון טרנספורמציה ומעבר (לאפקטים הדינמיים) ו- @font-face, box-shadow ו- border-radius (עבור הסטיילינג).
עוד על שימוש ב- CSS3 ליצירת ערימה דינמית של כרטיסי אינדקס
שכבות על מדהימות עם CSS3
הטריק עם שכבות -על אלה הוא גבול השיפוע, כשהוא עובר כתום בהיר עד כהה ככל שאתה הולך מלמעלה למטה. כדי ליצור את האפקט הזה השתמשנו במאפיין תמונת הגבול, שהוא תוספת קטנה ומסובכת ל- CSS.
עוד על שכבות על מדהימות עם CSS3
Going Nuts עם מעברי CSS
המחבר יראה לך כיצד שינוי CSS 3 ומעברי WebKit יכולים להוסיף זינג לאופן הצגת התמונות באתר שלך.
עוד על Going Nuts עם מעברי CSS
אנימציות CSS3 ושקולות jQuery שלהם
הדרכה זו/דוגמאות אלה יציגו את השימוש באותו HTML, עם שיעורים שונים עבור CSS3 ו- jQuery. אתה יכול להשוות את שני הקודים ולראות איזה מהם אתה אוהב יותר. אל תשכח לבדוק את ההדגמה/להוריד את קוד המקור כדי לראות איך הכל עובד מתחת למכסה המנוע.
עוד על הנפשות CSS3 ושקולות jQuery שלהם
אנימציה CSS3 מושלגת
קר ומושלג כאן בברייטון, אז כדי לחגוג את הדברים הלבנים הנופלים (וכמובן את החגיגות השונות בתקופה זו של השנה) Natbat משלו של קלירפלט הפכה הפתעת אנימציה מושלגת CSS3 לכולכם Safari ו- Chrome משתמשים בחוץ.
עוד על אנימציה CSS3 מושלגת
עוד על טרנספורמציות CSS בתלת מימד
טרנספורמציות CSS שונות בתלת מימד בסקירה כללית.
עוד על עוד בנושא טרנספורמציות CSS בתלת מימד
שעון CSS3 עם jQuery
שעון אולד סקול עם CSS3 ו- jQuery.
שחזור ה- OS X Dock
אנו לוקחים רשימה בסיסית של קישורים והופכים אותם למזח מדהים של OS X של סמלים.
אפקט Coverflow הכולל טרנספורמציות CSS וממשק משתמש של jQuery
הוכחת מושג זו מציגה אפקט זרימת כיסוי באמצעות תכונת הטרנספורמציה החדשה של CSS מ- Webkit (מוצגת ב- Safari 3.1). מיותר לציין שהוא לא יפעל בדפדפנים אחרים בשלב זה (אולם התאמתו לקנבס אמורה להיות קלה למדי, וגם עכשיו היא לא תישבר בדפדפנים אחרים).
עוד על אפקט Coverflow הכולל טרנספורמציות CSS וממשק המשתמש של jQuery
תפריט ממוזערת אלסטית
בניסיון מתמשך להציע שיטות חלופיות לעריכת תפריטים, חיבר המחבר תפריט ממוזער אלסטי.
עוד על תפריט תמונות ממוזערות אלסטיות
אלה כמה אפקטים די מגניבים, הא? אני בטוח שלא היה לך מושג ש- CSS3 היא שפת תכנות כה עוצמתית. ובכן, עכשיו אתה עושה! כעת, בעזרת הדרכות אלה, תוכל ליצור הנפשות משלך ב- CSS3. אתה יכול לעקוב אחר המדריכים האלה בדיוק עד שיש לך הבנה בשפה ואז תוכל להתחיל לעבוד על הנפשות ייחודיות משלך..