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 טהור.

אנימציה תלת מימדית באמצעות CSS3 טהור

עוד על אנימציה תלת מימדית באמצעות CSS3 טהור

שעון צבעוני

צור jQuery צבעוני & שעון CSS, שיעזור לך לעקוב אחר השניות האחרונות היקרות של השנה.

שעון צבעוני

עוד על שעון צבעוני

מערכת דירוג צבעונית עם CSS3

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

מערכת דירוג צבעונית עם CSS3

עוד על מערכת דירוג צבעונית עם CSS3

מיקום צל דינאמי PNG & אֲטִימוּת

כאשר האור נדלק, המיקום והאטימות של צל הלוגו ישתנו באופן דינמי, בהתאם למיקום ולמרחק של הנורה. אל תשכח לגרור את הלוגו ו/או את הנורה!

מיקום צל דינמי PNG & amp; אֲטִימוּת

עוד על מיקום צל דינאמי PNG & אֲטִימוּת

jQuery DJ Hero

על ידי שילוב CSS3 ו- jQuery, יצרתי שני רשומות שתוכל להתחיל לסובב (מהר ואיטי יותר) ואפילו אפשר לגרד. בגרסה עתידית, ניתן להשתמש בזה יחד עם צליל אמיתי (לגרסה זו אין צליל).

jQuery DJ Hero

עוד על jQuery DJ Hero

אפקטים של בוקה עם CSS3 ו- jQuery

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

אפקטים של בוקה עם CSS3 ו- jQuery

עוד על אפקטים של בוקה עם CSS3 ו- jQuery

החלל הוא הגבול הסופי, נכון?

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

מקום הוא הגבול הסופי, נכון?

עוד על שטח הוא הגבול הסופי, נכון?

כיצד ליצור לוח הזזה אנכי סקסי באמצעות jQuery ו- CSS3

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

כיצד ליצור לוח הזזה אנכי סקסי באמצעות jQuery ו- CSS3

עוד על יצירת לוח הזזה אנכי סקסי באמצעות jQuery ו- CSS3

אנימציה ממסגרת למסגרת

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

אנימציה ממסגרת למסגרת

עוד על אנימציה מסגרת-למסגרת

שעון אנלוגי CSS3

שעון אנלוגי שנוצר באמצעות מעבר webkit והפיכת CSS. JavaScript משמש רק למשוך את הזמן הנוכחי.

שעון אנלוגי CSS3

עוד על שעון אנלוגי CSS3

Spotlight Cast Shadow

העבר את הסמן מעל התיבה כדי להטיל צל עם אור הזרקורים. הדגמה זו משתמשת במאפיין הטקסט של צל CSS, הנתמך ב- Safari, Firefox 3.5, Opera ו- Chrome.

Spotlight Cast Shadow

א ב ג

עוד על Spotlight Cast Shadow

ויניל הזזה עם CSS3

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

ויניל הזזה עם CSS3

עוד על ויניל הזזה עם CSS319

אפקטים מדהימים של ריחוף תמונות באמצעות Webkit ו- CSS

שטחים

אפקטים מדהימים של ריחוף תמונות באמצעות Webkit ו- CSS

עוד על אפקטים מדהימים של ריחוף תמונות באמצעות Webkit ו- CSS

השתמש ב- CSS3 ליצירת ערימה דינמית של כרטיסי אינדקס

ניצור ערימה דינמית של כרטיסי אינדקס אך ורק עם HTML ו- CSS3 ונשתמש בתכונות CSS3 כגון טרנספורמציה ומעבר (לאפקטים הדינמיים) ו- @font-face, box-shadow ו- border-radius (עבור הסטיילינג).

השתמש ב- CSS3 ליצירת ערימה דינמית של כרטיסי אינדקס

עוד על שימוש ב- CSS3 ליצירת ערימה דינמית של כרטיסי אינדקס

שכבות על מדהימות עם CSS3

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

שכבות על מדהימות עם CSS3

עוד על שכבות על מדהימות עם CSS3

Going Nuts עם מעברי CSS

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

Going Nuts עם מעברי CSS

עוד על Going Nuts עם מעברי CSS

אנימציות CSS3 ושקולות jQuery שלהם

הדרכה זו/דוגמאות אלה יציגו את השימוש באותו HTML, עם שיעורים שונים עבור CSS3 ו- jQuery. אתה יכול להשוות את שני הקודים ולראות איזה מהם אתה אוהב יותר. אל תשכח לבדוק את ההדגמה/להוריד את קוד המקור כדי לראות איך הכל עובד מתחת למכסה המנוע.

אנימציות CSS3 ושקולות jQuery שלהם

עוד על הנפשות CSS3 ושקולות jQuery שלהם

אנימציה CSS3 מושלגת

קר ומושלג כאן בברייטון, אז כדי לחגוג את הדברים הלבנים הנופלים (וכמובן את החגיגות השונות בתקופה זו של השנה) Natbat משלו של קלירפלט הפכה הפתעת אנימציה מושלגת CSS3 לכולכם Safari ו- Chrome משתמשים בחוץ.

אנימציה CSS3 מושלגת

עוד על אנימציה CSS3 מושלגת

עוד על טרנספורמציות CSS בתלת מימד

טרנספורמציות CSS שונות בתלת מימד בסקירה כללית.

עוד על טרנספורמציות CSS בתלת מימד

עוד על עוד בנושא טרנספורמציות CSS בתלת מימד

שעון CSS3 עם jQuery

שעון אולד סקול עם CSS3 ו- jQuery.

שעון CSS3 עם jQuery

עוד על שעון CSS3 עם jQuery

שחזור ה- OS X Dock

אנו לוקחים רשימה בסיסית של קישורים והופכים אותם למזח מדהים של OS X של סמלים.

שחזור ה- OS X Dock

עוד על שחזור ה- OS X Dock

אפקט Coverflow הכולל טרנספורמציות CSS וממשק משתמש של jQuery

הוכחת מושג זו מציגה אפקט זרימת כיסוי באמצעות תכונת הטרנספורמציה החדשה של CSS מ- Webkit (מוצגת ב- Safari 3.1). מיותר לציין שהוא לא יפעל בדפדפנים אחרים בשלב זה (אולם התאמתו לקנבס אמורה להיות קלה למדי, וגם עכשיו היא לא תישבר בדפדפנים אחרים).

אפקט Coverflow הכולל טרנספורמציות CSS וממשק משתמש של jQuery

עוד על אפקט Coverflow הכולל טרנספורמציות CSS וממשק המשתמש של jQuery

תפריט ממוזערת אלסטית

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

תפריט ממוזערת אלסטית

עוד על תפריט תמונות ממוזערות אלסטיות

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