Animating CSS ותכונותיו

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

הסוד של עיצובים אידיאליים

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

המראה אנימציה CSS

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

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

הנה קוד לדוגמה.

שיפור הפונקציונליות של לחצנים

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

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

CSS- אנימציה כאשר מרחף מעל קטע האתר

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

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

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

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

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

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

קוד לדוגמה הוא כדלקמן.

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

כמה ניואנסים של שימוש בסוג זה של אנימציה על לחצנים

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

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

טקסט אנימציה

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

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

הנפשת טקסט בסגנון של סרטי אימה

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

לאחר מכן לעטוף את כל המילים בתגים h2 בתג span.

זה יקרה ככה.

זה ייראה קצת מסורבל, אבל אל תתביישו.

קבל מבנה מטורף למדי.

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

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

מאז אנחנו הולכים למקם את כל המכתבים שלנו במרכז המסך, עבור המיכל שלנו אנחנו גם צריכים Flexbox.

בואו לתת דוגמה של הקוד שלו.

עכשיו עשינו את זה כל המכתבים כי הם עטוף בכיתה span, השייכת בכיתה האב. משפטים-משפטים, יהיה ממוקם יהיה קבוע בדיוק במרכז.

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

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

אותן אותיות שלנו יהיו שקופות, ואנו נריץ את מרווח ההנפשה עבורן באיזה 5.2 שניות. להלן קוד לדוגמה.

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

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

בסופו של דבר, נוסיף שוב את האותיות ההולכות ונעשה אותן. זה יהיה שוב לתת אפקט טשטוש קטן.

ולבסוף את הביטוי האחרון של CSS- אנימציה.

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

אל תשכח את מקורות ההשראה

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

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