38 השראה CSS3 הדגמות אנימציה
מאז כניסתה של CSS3, יש באמת הרבה ויכוחים חמים סובבים סביב האפשרויות שלה ואת השימושיות. עם זאת, יש גם הרבה ניסויים מעניינים בעבודת יד כדי לחקור את הפוטנציאל שלה. למרות הניסויים על ידי כל מתכוון לא להוכיח את השימושיות של CSS3, הם באמת הראו את האפשרויות האמיתיות של CSS3, במידה מסוימת היזמים מאמינים CSS3 הוא העתיד.
האם זה נכון? שופט את זה בעיניים שלך. בחלון הראווה הזה לא נראה כלום אלא רק 38 מעורר השראה CSS3 מבוסס אנימציה הדגמות כי רק לגלות את הפוטנציאל האמיתי של CSS3. מלבד הניסויים הטהורים, תוכלו גם לראות כמה דוגמאות מעשיות של איך CSS3 ניתן ליישם לתוך עיצוב אתרים כדי להפוך אותו מתוק יותר סקסי.
מספיק אמר, תן לנו לחקור את העולם פנטסטי של CSS3!
אתה עשוי להתעניין גם ב:
- מדריך למתחילים ל- CSS3
- יצירת מתנדנד CSS3 תיבת חיפוש
- בניית דפי HTML5 / CSS3
- תפריט ניווט חינני
- יצירת אייאקס מבוסס HTML5 / CSS3 טופס יצירת קשר
- 35 גרפיקה נבנה רק עם CSS3
- יותר…
מומלץ מאוד להציג הדגמות אלה באמצעות הגרסה העדכנית ביותר של גרסת Safari או מפתח של Google Chrome. רוב הדגמות תומכות בגירסה העדכנית ביותר של Firefox ו- Google Chrome.
אנימציה 3D סליל
הראשון ברשימה הוא אנימציה מדהימה שנעשו על ידי Marcofolio.net, באמצעות CSS3 3D transforms. האנימציה נראית כמו קסם עצמו, אבל אתה יכול למעשה ללמוד ליצור את האפקט דומה עם הדרכה במאמר!
לחצנים מונפשים
חובה לראות עבור מעצב אינטרנט, כמו הדגמה לא רק מראה את האפשרויות של אנימציה CSS3, אלא גם מספק אפקטים כפתור מגניב מאוד מעשית השראה!
תפריטים אנימציה
מנסה לתבל את תפריטי האנימציה שלך כדי לגרום להם להיראות ממש מגניב ויצירתי? הדגמה זו מתאימה לך.
AT-AT ווקר
אנימציה הדגמה בהשראת מראה את הפוטנציאל של CSS3 על animating יחידה עם חלקי גוף.
קרב 3
Battlefield CSS3 עם הרבה פיצוצים ויריות!
עניין גדול
זה אנימציה חלקה וחלק שעשה הדגמה זו עניין גדול.
סמן האור יכול?
“היי, אני מפלצת הסמן. לאבא שלי יש מסר בשבילך: 'בבקשה, אל תשתמש הסמן: אף אחד, למעט אם אתה יוצר הסמן לאכול מפלצת '.”
עגן CSS
ניסוי סקסי מחקה את המזח של Mac OS X, וזה ממש חלקה.
איש CSS3
תסתכל החוצה, הנה מגיע האיש CSS3! דוגמה מושלמת להציג את הפוטנציאל האמיתי של אנימציה CSS3.
Dribbble כדור מקפץ
עם שימוש קטן של טריקים גרפיים מגיע נחמד ומשעשע CSS3 אנימציה.
דולה
Dulla די הרבה מראה אחת הטכניקות הנפוצות ביותר המשמשים ליצירת משחק platformer 2D, אשר כעת גם אפשרי עם CSS3.
מסגרת על ידי מסגרת אנימציה
מסגרת לפי מסגרת אנימציה עם CSS3? אין בעיה!
אנימציה גרף
אנימציה פשוטה אך רבת עוצמה כדי שתוכל להציג / להסביר את הגרף באתר שלך, ללמוד לעשות זאת!
גבוהה
אנימצית מוסיקה מסתורית המציגה תמונות מחיפוש Google באופן דינמי בזמן אמת, והתמונות המוצגות מבוססות על מילות השיר.
אפקטים מרחפים
העתיד של האפקט מרחף מגיע עם CSS3. מלוטש ומבטיח.
אני יוסף בארט
CSS3 משולבת בסמלי המדיה החברתית של אתר הפורטפוליו. זה לא רק כיף אלא גם מראה את היצירתיות של המעצב.
זום אינסופי
אנימציה חלקה, גם דרך נחמדה להציג את תיק ההשקעות שלך. הזום הכולל עבור 26 תמונות הוא 67108864: 1.
Kinect ו CSS3
“14 המפרקים הגוף הם במעקב ולהמיר אנימציה CSS קצר באמצעות Xbox Kinect. נתוני הגוף הוא הביא את הדפדפן שבו הוא מנותח והוסב אנימציות CSS עם animatable.com.”
מטריקס
רוצה להיות מגניב כמו מטריקס? עם CSS3 אתה יכול לעשות את זה.
קוביות מורפינג
הדגמה ניסיוני לחקור את CSS3 באמצעות 3D transforms, אנימציות ומעברים. החלק המעניין כאן הוא שאתה עדיין יכול לבחור את הטקסט על האלמנטים, גם כאשר הם עדיין מסתובבים.
מערכת השמש שלנו
אתה לא צריך תוכנה עצמאית יקר כדי לעזור לתלמידים לחקור את מערכת השמש יותר.
דאף רול
“מממממ ... אהוב היה אוהב את אספקת הבירה.”
מעגל פוסטר
דוגמה פשוטה אך מעניינת על מראה לך כיצד להשתמש בהמרה CSS ואנימציה כדי להשיג השפעה מעניינת.
סכנה
מי יכול להתנגד לאתר עם תווים חמודים באמת ואנימציות משעשע?
Rofox
אנימציה חלקה ומהנה, לקבל את קוד המקור לנסות בעצמך!
שון הכבשים
“צפה בשאון ובתחושות של חבריו בקליפים מ'אין חולה רוח ',' שלג ',' המרדף הגדול 'ו-' Twos Company 'באמצעות ניסוי אינטראקטיבי שנוצר עם וידאו HTML5 מואץ בחומרה, 3D CSS Transforms ו- WebM.”
חלל
אולי שטח הוא הגבול הסופי CSS3.
שטח
יצירת אפקט קסום כמו זה לא ממש קשה עם CSS3, כפי שיש בעיקר חוזר- רדיאלי- gradient ו גודל הרקע Flights וריאציות אפשריות עם כמות סבירה של tweaks.
מלחמת הכוכבים סריקה
מלחמת הכוכבים פתיחת אפקט הסריקה! בדיוק כמו אפי כמו CSS3.
האינטרנט האקספרסיבי
האינטרנט האקספרסיבי מציג לא רק את CSS3 ואת תמיכת הדפדפן, הפניה והתיעוד שלו, אלא גם מציג לראווה את הנפשת CSS3 על דף האינטרנט שלו.
ראשי המכתבים
באמצעות סוגי ליצור צל שנראה כמו הפנים של האדם, מי היה חושב שזה יהיה אפשרי עם CSS3?
האיש מתוך הוליווד /
ראית פעם את אלה אנימציות אטרקטיבי באמצעות טיפוגרפיה טהורה? ובכן, אתה יכול לעשות את זה עם CSS3 מדי.
פלנטריום
פשוט הדגמה אפית על לחקור את הפלנטריום עם פרטים. SVG, JavaScript, HTML5, CSS3, גופנים וסוגים מעורבים.
סוג Rains
“התחזית להיום, בהנחה שאתה משתמש בדפדפן מודרני, מעונן, עם סיכוי של 100% להתקלחות בגאורגיה.”
טיפוגרפיה אפקטים
מלבד כפתור, התפריט ואת ההשפעות מרחף, אתה יכול גם להשיג אפקטים טיפוגרפיה יצירתית עם CSS3. jQuery מעורב גם הדגמה זו כדי סגנון האותיות של המילים.
הליכה עם אנדרו הוייר
החשוב מכל, אתה יכול גם ללמוד ללכת עם אנדרו הוייר במאמר!
וונדר Webkit
שימוש נפלא של CSS3 3D transformations עם JavaScript מטריקס הספרייה. נשמע טכני, אבל התוצאה היא מגניבה.
זאטרופ
מה עוד אתה לא יכול לעשות עם CSS3 כאשר Zoetrope אפשרי עם זה?
השתקפות
מעורר השראה? כן. מעשית? אולי. טכניקה הנפשה היא תמיד נושא לגרד את הראש עבור מפתח ואנימטור כפי שהוא דורש רמה מסוימת של ידע לייצר אנימציה חלקה, ייחודית ומסוגננת. בעוד CSS3 יש את האפשרות לעשות את האנימציה, זה לא אומר שזה כלי מתאים אנימציה. אני חושב בסופו של דבר זה עדיין על ההעדפה שלך, כמו בשבילי, אני בסדר עם שניהם, כל עוד הכלי מתאים לצרכים של הפרויקט.
מה דעתך על אלה אנימציות CSS3? האם אלה אנימציות CSS3 רק טוב ניסויים, או שהם יכולים גם להיות מיושם לתוך עיצוב החיים האמיתיים? כרגיל, אנו מקדמים בברכה את המחשבה היקרה שלך על הנושא, וכן תן לנו לדעת את היצירה האהובה עליך של CSS3 אנימציה גם כן!
יותר
רק להציג, באמת? מגיע לך לקבל יותר! להלן מדריכים ומדריכים של CSS3 מ Hongkiat לך, יש זמן נחמד לחקור אותם!
