האם אתה מכיר את האפקט הזה שבו ראשו של מישהו חודר דרך עיגול או חור? האנימציה המפורסמת של Porky Pig שבה הוא מנופף לשלום בזמן שהוא יוצא מסדרה של טבעות אדומות היא הדוגמה המושלמת, ו Kilian Valkhof למעשה יצר את זה מחדש כאן ב-CSS-Tricks לפני כמה זמן.
יש לי רעיון דומה אבל התמודדתי בצורה אחרת ועם מעט אנימציה. אני חושב שזה די פרקטי ויוצר אפקט ריחוף מסודר שאתה יכול להשתמש בו על משהו כמו האווטאר שלך.
תראה את זה? אנחנו הולכים לעשות אנימציה בקנה מידה שבו נראה שהאווטאר קופץ ישירות מהמעגל שבו הוא נמצא. מגניב, נכון? אל תסתכל על הקוד ובואו נבנה יחד את האנימציה הזו צעד אחר צעד.
ה-HTML: רק אלמנט אחד
אם לא בדקת את הקוד של ההדגמה ואתה תוהה כמה div
זה ייקח, אז עצור שם, כי הסימון שלנו אינו אלא אלמנט תמונה בודד:
<img src="" alt="">
כן, אלמנט בודד! החלק המאתגר בתרגיל זה הוא השימוש בכמות הקוד הקטנה ביותר האפשרית. אם היית עוקב אחרי לזמן מה, אתה אמור להיות רגיל לזה. אני משתדל מאוד למצוא פתרונות CSS שניתן להשיג עם הקוד הקטן ביותר שניתן לתחזוקה.
כתבתי סדרת מאמרים כאן ב-CSS-Tricks שבו אני חוקר אפקטים שונים של ריחוף באמצעות אותו סימון HTML המכיל אלמנט בודד. אני נכנס לפרטים על מעברי צבע, מיסוך, גזירה, קווי מתאר ואפילו טכניקות פריסה. אני ממליץ בחום לבדוק אותם כי אני אשתמש שוב ברבים מהטריקים בפוסט הזה.
קובץ תמונה מרובע עם רקע שקוף יעבוד בצורה הטובה ביותר עבור מה שאנחנו עושים. הנה זה שאני משתמש בו אם אתה רוצה להתחיל עם זה.
אני מקווה לראות הרבה דוגמאות לכך ככל האפשר באמצעות תמונות אמיתיות - אז בבקשה שתף את התוצאה הסופית שלך בהערות כשתסיים כדי שנוכל לבנות אוסף!
לפני שקפוץ ל-CSS, בואו ננתח תחילה את האפקט. התמונה גדלה עם ריחוף, כך שבטוח נשתמש בה transform: scale()
שם. יש מעגל מאחורי האווטאר, ושיפוע רדיאלי אמור לעשות את העבודה. לבסוף, אנחנו צריכים דרך ליצור גבול בתחתית העיגול שיוצר את המראה של האווטאר מאחורי העיגול.
בואו נתחיל לעבוד!
אפקט קנה המידה
נתחיל בהוספת הטרנספורמציה:
img { width: 280px; aspect-ratio: 1; cursor: pointer; transition: .5s;
}
img:hover { transform: scale(1.35);
}
שום דבר לא מסובך עדיין, נכון? בוא נמשיך הלאה.
המעגל
אמרנו שהרקע יהיה שיפוע רדיאלי. זה מושלם כי אנחנו יכולים ליצור עצירות קשות בין הצבעים של שיפוע רדיאלי, מה שגורם לזה להיראות כאילו אנחנו מציירים עיגול עם קווים מלאים.
img { --b: 5px; /* border width */ width: 280px; aspect-ratio: 1; background: radial-gradient( circle closest-side, #ECD078 calc(99% - var(--b)), #C02942 calc(100% - var(--b)) 99%, #0000 ); cursor: pointer; transition: .5s;
}
img:hover { transform: scale(1.35);
}
שימו לב למשתנה CSS, --b
, אני משתמש שם. הוא מייצג את עובי ה"גבול" שבעצם משמש רק כדי להגדיר את עצירות הצבע הקשות עבור החלק האדום של השיפוע הרדיאלי.
השלב הבא הוא לשחק עם גודל השיפוע על ריחוף. העיגול צריך לשמור על גודלו ככל שהתמונה גדלה. מכיוון שאנו מיישמים א scale()
טרנספורמציה, אנחנו בעצם צריכים להקטין את גודל המעגל כי אחרת הוא מתרחב עם האווטאר. אז בעוד שהתמונה גדלה, אנחנו צריכים את השיפוע כדי להקטין.
נתחיל בהגדרת משתנה CSS, --f
, שמגדיר את "גורם קנה המידה", והשתמש בו כדי לקבוע את גודל המעגל. אני משתמש 1
כערך ברירת המחדל, כמו שזה הסולם הראשוני של התמונה והעיגול שממנו אנו הופכים.
הנה הדגמה כדי להמחיש את הטריק. העבר את העכבר כדי לראות מה קורה מאחורי הקלעים:
הוספתי צבע שלישי ל radial-gradient
כדי לזהות טוב יותר את אזור השיפוע בעת ריחוף:
radial-gradient( circle closest-side, #ECD078 calc(99% - var(--b)), #C02942 calc(100% - var(--b)) 99%, lightblue
);
כעת עלינו למקם את הרקע שלנו במרכז המעגל ולוודא שהוא תופס את מלוא הגובה. אני אוהב להצהיר הכל ישירות על background
מאפיין קיצור, כדי שנוכל להוסיף את מיקום הרקע שלנו ולוודא שהוא לא חוזר על ידי הדבקה בערכים האלה מיד לאחר radial-gradient()
:
background: radial-gradient() 50% / calc(100% / var(--f)) 100% no-repeat;
הרקע ממוקם במרכז (50%
), יש רוחב שווה ל calc(100%/var(--f))
, ובעל גובה שווה ל 100%
.
שום דבר לא מתקלקל מתי --f
שווה ל 1
- שוב, קנה המידה הראשוני שלנו. בינתיים, השיפוע תופס את מלוא רוחב המיכל. כשאנחנו מגדילים --f
, גודל האלמנט גדל - הודות ל- scale()
טרנספורמציה - וגודל השיפוע יורד.
הנה מה שאנחנו מקבלים כשאנחנו מיישמים את כל זה על ההדגמה שלנו:
אנחנו מתקרבים! יש לנו את אפקט ההצפה בחלק העליון, אבל אנחנו עדיין צריכים להסתיר את החלק התחתון של התמונה, כך שזה נראה כאילו הוא יוצא מהמעגל ולא יושב מולו. זה החלק המסובך בכל העניין הזה וזה מה שאנחנו הולכים לעשות בהמשך.
הגבול התחתון
ניסיתי לראשונה להתמודד עם זה עם border-bottom
נכס, אבל לא הצלחתי למצוא דרך להתאים את גודל הגבול לגודל לעיגול. הנה הטוב ביותר שיכולתי להשיג ואתה יכול מיד לראות שזה שגוי:
הפתרון בפועל הוא להשתמש ב- outline
תכונה. כן, outline
, לא border
. ב מאמר קודם, אני מראה איך outline
הוא רב עוצמה ומאפשר לנו ליצור אפקטי ריחוף מגניבים. בשילוב עם outline-offset
, יש לנו בדיוק את מה שאנחנו צריכים להשפעה שלנו.
הרעיון הוא להגדיר א outline
על התמונה והתאם את ההיסט שלה כדי ליצור את הגבול התחתון. ההיסט יהיה תלוי בגורם קנה המידה באותו אופן שבו היה גודל השיפוע.
עכשיו יש לנו את ה"גבול" התחתון שלנו (למעשה א outline
) בשילוב עם ה"גבול" שנוצר על ידי הגרדיאנט ליצירת עיגול שלם. אנחנו עדיין צריכים להסתיר חלקים מה- outline
(מלמעלה ומהצדדים), שאליו נגיע עוד רגע.
הנה הקוד שלנו עד כה, כולל עוד כמה משתני CSS שבהם תוכל להשתמש כדי להגדיר את גודל התמונה (--s
) וצבע ה"גבול" (--c
):
img { --s: 280px; /* image size */ --b: 5px; /* border thickness */ --c: #C02942; /* border color */ --f: 1; /* initial scale */ width: var(--s); aspect-ratio: 1; cursor: pointer; border-radius: 0 0 999px 999px; outline: var(--b) solid var(--c); outline-offset: calc((1 / var(--f) - 1) * var(--s) / 2 - var(--b)); background: radial-gradient( circle closest-side, #ECD078 calc(99% - var(--b)), var(--c) calc(100% - var(--b)) 99%, #0000 ) 50% / calc(100% / var(--f)) 100% no-repeat; transform: scale(var(--f)); transition: .5s;
}
img:hover { --f: 1.35; /* hover scale */
}
מכיוון שאנו צריכים גבול תחתון עגול, הוספנו א border-radius
בצד התחתון, המאפשר את outline
כדי להתאים את העקמומיות של השיפוע.
החישוב המשמש על outline-offset
הוא הרבה יותר פשוט ממה שהוא נראה. כברירת מחדל, outline
מצוייר בחוץ של הקופסה של האלמנט. ובמקרה שלנו, אנחנו צריכים את זה חֲפִיפָה האלמנט. ליתר דיוק, אנחנו צריכים את זה כדי לעקוב אחר המעגל שנוצר על ידי שיפוע.
כאשר אנו משנים את האלמנט, אנו רואים את הרווח בין המעגל לקצה. בל נשכח שהרעיון הוא להשאיר את העיגול באותו גודל לאחר ריצת הטרנספורמציה בקנה המידה, מה שמותיר לנו את הרווח בו נשתמש להגדרת היסט המתאר כפי שמוצג באיור לעיל.
בוא לא נשכח שהאלמנט השני הוא בקנה מידה, אז התוצאה שלנו היא גם בקנה מידה... מה שאומר שאנחנו צריכים לחלק את התוצאה ב f
כדי לקבל את ערך ההיסט האמיתי:
Offset = ((f - 1) * S/2) / f = (1 - 1/f) * S/2
אנו מוסיפים סימן שלילי מכיוון שאנו צריכים שהמתאר יעבור מבחוץ לפנים:
Offset = (1/f - 1) * S/2
הנה הדגמה מהירה שמראה כיצד המתאר עוקב אחר השיפוע:
אולי אתה כבר רואה את זה, אבל אנחנו עדיין צריכים את המתאר התחתון כדי לחפוף את העיגול במקום לתת לו לדמם דרכו. נוכל לעשות זאת על ידי הסרת גודל הגבול מההיסט:
outline-offset: calc((1 / var(--f) - 1) * var(--s) / 2) - var(--b));
כעת עלינו למצוא כיצד להסיר את החלק העליון מהמתאר. במילים אחרות, אנחנו רוצים רק את החלק התחתון של התמונה outline
.
ראשית, בואו נוסיף מקום בחלק העליון עם ריפוד כדי למנוע את החפיפה בחלק העליון:
img { --s: 280px; /* image size */ --b: 5px; /* border thickness */ --c: #C02942; /* border color */ --f: 1; /* initial scale */ width: var(--s); aspect-ratio: 1; padding-block-start: calc(var(--s)/5); /* etc. */
}
img:hover { --f: 1.35; /* hover scale */
}
אין היגיון מיוחד בריפוד העליון הזה. הרעיון הוא להבטיח שהמתאר לא יגע בראשו של האווטאר. השתמשתי בגודל של האלמנט כדי להגדיר את החלל כך שיהיה תמיד את אותה פרופורציה.
שימו לב שהוספתי את content-box
ערך ל- background
:
background: radial-gradient( circle closest-side, #ECD078 calc(99% - var(--b)), var(--c) calc(100% - var(--b)) 99%, #0000 ) 50%/calc(100%/var(--f)) 100% no-repeat content-box;
אנחנו צריכים את זה כי הוספנו ריפוד ואנחנו רוצים רק את הרקע מוגדר לתיבת התוכן, אז אנחנו חייבים לומר במפורש לרקע לעצור שם.
הוספת מסכת CSS לתערובת
הגענו לחלק האחרון! כל מה שאנחנו צריכים לעשות זה להסתיר כמה חלקים, וסיימנו. לשם כך, נסתמך על mask
רכוש וכמובן שיפועים.
הנה איור כדי להמחיש מה אנחנו צריכים להסתיר או מה אנחנו צריכים להראות כדי להיות מדויק יותר
התמונה השמאלית היא מה שיש לנו כרגע, והימנית היא מה שאנחנו רוצים. החלק הירוק ממחיש את המסכה שעלינו להחיל על התמונה המקורית כדי לקבל את התוצאה הסופית.
אנו יכולים לזהות שני חלקים של המסכה שלנו:
- חלק עגול בתחתית בעל אותו מימד ועקמומיות כמו השיפוע הרדיאלי בו השתמשנו ליצירת המעגל מאחורי האווטאר
- מלבן בחלק העליון המכסה את השטח בתוך קו המתאר. שימו לב כיצד קו המתאר נמצא מחוץ לאזור הירוק בחלק העליון - זה החלק החשוב ביותר, מכיוון שהוא מאפשר לחתוך את המתאר כך שרק החלק התחתון נראה.
הנה ה-CSS האחרון שלנו:
img { --s: 280px; /* image size */ --b: 5px; /* border thickness */ --c: #C02942; /* border color */ --f: 1; /* initial scale */ --_g: 50% / calc(100% / var(--f)) 100% no-repeat content-box; --_o: calc((1 / var(--f) - 1) * var(--s) / 2 - var(--b)); width: var(--s); aspect-ratio: 1; padding-top: calc(var(--s)/5); cursor: pointer; border-radius: 0 0 999px 999px; outline: var(--b) solid var(--c); outline-offset: var(--_o); background: radial-gradient( circle closest-side, #ECD078 calc(99% - var(--b)), var(--c) calc(100% - var(--b)) 99%, #0000) var(--_g); mask: linear-gradient(#000 0 0) no-repeat 50% calc(-1 * var(--_o)) / calc(100% / var(--f) - 2 * var(--b)) 50%, radial-gradient( circle closest-side, #000 99%, #0000) var(--_g); transform: scale(var(--f)); transition: .5s;
}
img:hover { --f: 1.35; /* hover scale */
}
בואו נפרק את זה mask
תכונה. בתור התחלה, שימו לב שדומה radial-gradient()
מ background
רכוש נמצא שם. יצרתי משתנה חדש, --_g
, כדי שהחלקים המשותפים יהפכו את הדברים לפחות עמוסים.
--_g: 50% / calc(100% / var(--f)) 100% no-repeat content-box; mask: radial-gradient( circle closest-side, #000 99%, #0000) var(--_g);
לאחר מכן, יש א linear-gradient()
גם שם:
--_g: 50% / calc(100% / var(--f)) 100% no-repeat content-box; mask: linear-gradient(#000 0 0) no-repeat 50% calc(-1 * var(--_o)) / calc(100% / var(--f) - 2 * var(--b)) 50%, radial-gradient( circle closest-side, #000 99%, #0000) var(--_g);
זה יוצר את החלק המלבן של המסכה. הרוחב שלו שווה לרוחב השיפוע הרדיאלי פחות פי שניים מעובי הגבול:
calc(100% / var(--f) - 2 * var(--b))
גובה המלבן שווה לחצי, 50%
, של גודל האלמנט.
אנחנו צריכים גם את השיפוע הליניארי ממוקם במרכז האופקי (50%
) ומקזז מלמעלה באותו ערך כמו ההיסט של המתאר. יצרתי משתנה CSS אחר, --_o
, עבור ההיסט שהגדרנו בעבר:
--_o: calc((1 / var(--f) - 1) * var(--s) / 2 - var(--b));
אחד הדברים המבלבלים כאן הוא שאנחנו צריכים א שלילי קיזוז עבור המתאר (כדי להזיז אותו מבחוץ לפנים) אבל א חיובי היסט עבור השיפוע (כדי לעבור מלמעלה למטה). אז, אם אתה תוהה למה אנחנו מכפילים את הקיזוז, --_o
, על ידי -1
, ובכן, עכשיו אתה יודע!
הנה הדגמה כדי להמחיש את תצורת השיפוע של המסכה:
העבר את העכבר למעלה וראה איך הכל נע ביחד. התיבה האמצעית ממחישה את שכבת המסכה המורכבת משני מעברים. דמיינו את זה כחלק הגלוי של התמונה השמאלית, ותקבלו את התוצאה הסופית בצד ימין!
גלישה את
אוף, סיימנו! ולא רק שסיימנו עם אנימציית ריחוף חלקה, אלא עשינו הכל עם HTML יחיד <img>
אֵלֵמֶנט. רק זה ופחות מ-20 שורות של תחבולות CSS!
בטח, הסתמכנו על כמה טריקים קטנים ונוסחאות מתמטיות כדי להגיע לאפקט כה מורכב. אבל ידענו בדיוק מה לעשות מכיוון שזיהינו את החלקים שאנחנו צריכים מראש.
האם היינו יכולים לפשט את ה-CSS אם הרשה לעצמנו יותר HTML? בהחלט. אבל אנחנו כאן כדי ללמוד טריקים חדשים של CSS! זה היה תרגיל טוב לחקור מעברי CSS, מיסוך, ה outline
ההתנהגות של הנכס, השינויים ועוד המון. אם הרגשת אבוד בכל שלב, אז בהחלט בדוק הסדרה שלי שמשתמש באותם מושגים כלליים. לפעמים זה עוזר לראות עוד דוגמאות ולהשתמש במקרים כדי להביא נקודה הביתה.
אני אשאיר אתכם עם הדגמה אחרונה שמשתמשת בתמונות של מפתחי CSS פופולריים. אל תשכח להראות לי הדגמה עם תמונה משלך כדי שאוכל להוסיף אותה לאוסף!
- הפצת תוכן ויחסי ציבור מופעל על ידי SEO. קבל הגברה היום.
- Platoblockchain. Web3 Metaverse Intelligence. ידע מוגבר. גישה כאן.
- מקור: https://css-tricks.com/a-fancy-hover-effect-for-your-avatar/
- 1
- 10
- 11
- 28
- 7
- 9
- 98
- a
- מֵעַל
- בהחלט
- הושג
- למעשה
- הוסיף
- לאחר
- תעשיות
- מאפשר
- מאפשר
- כְּבָר
- תמיד
- כמות
- ו
- הנפשה
- אחר
- החל
- מריחה
- AREA
- גִלגוּל
- רקע
- כי
- מאחור
- מאחורי הקלעים
- להיות
- הטוב ביותר
- מוטב
- בֵּין
- גדול
- גבול
- תַחתִית
- אריזה מקורית
- לשבור
- לִבנוֹת
- צרור
- מקרה
- מקרים
- מרכז
- אתגר
- לבדוק
- בדיקה
- מעגל
- קוד
- צֶבַע
- משולב
- הערות
- Common
- מורכב
- מסובך
- מורכב
- מושגים
- תְצוּרָה
- מבלבל
- מכולה
- תוכן
- קריר
- יכול
- זוג
- קורס
- מכסה
- לִיצוֹר
- נוצר
- יוצר
- CSS
- כיום
- חותך
- בְּרִירַת מֶחדָל
- מוגדר
- מגדיר
- הגדרה
- בהחלט
- פרט
- מפתחים
- DID
- אחר
- מֵמַד
- ישירות
- לא
- עושה
- לא
- מטה
- ציור
- נהיגה
- אדג '
- השפעה
- תופעות
- לְהַבטִיחַ
- וכו '
- אֲפִילוּ
- הכל
- בדיוק
- דוגמה
- דוגמאות
- תרגיל
- לחקור
- מפורסם
- תרשים
- שלח
- סופי
- בסופו של דבר
- ראשון
- לעקוב
- כדלקמן
- החל מ-
- חזית
- מלא
- כללי
- לקבל
- מקבל
- Go
- הולך
- טוב
- שיפועים
- ירוק
- גדל
- חצי
- קשה
- ראש
- גובה
- לעזור
- עוזר
- כאן
- הסתר
- מאוד
- חור
- עמוד הבית
- מקווה
- מאוזן
- לרחף
- איך
- איך
- HTML
- HTTPS
- רעיון
- מזוהה
- לזהות
- תמונה
- תמונות
- מיד
- חשוב
- in
- באחר
- כולל
- להגדיל
- בתחילה
- IT
- רק אחד
- שמור
- סוג
- לדעת
- אחרון
- שכבה
- מערך
- לִלמוֹד
- יציאה
- לתת
- קווים
- קְצָת
- נראה
- נראה כמו
- נראה
- מגרש
- ניתנת לשמירה
- לעשות
- עושה
- רב
- מסכה
- להתאים
- מתמטיקה
- אומר
- בינתיים
- אמצע
- רֶגַע
- יותר
- רוב
- המהלך
- צורך
- צרכי
- שלילי
- חדש
- הבא
- לקזז
- ONE
- מְקוֹרִי
- אחר
- אַחֶרֶת
- מתווה
- קווי מתאר
- בחוץ
- שֶׁלוֹ
- חלק
- מסוים
- חלקים
- חתיכות
- אפלטון
- מודיעין אפלטון
- אפלטון נתונים
- לְשַׂחֵק
- אנא
- נקודה
- פופ
- פופולרי
- עמדה
- מיצוב
- אפשרי
- הודעה
- חזק
- מעשי
- בדיוק
- יפה
- קודם
- קוֹדֶם
- רכוש
- מָהִיר
- לְהַגִיעַ
- הגיע
- ממשי
- להמליץ
- Red
- להסיר
- הסרת
- לחזור על
- מייצג
- תוצאה
- אמר
- אותו
- סולם
- מאזניים
- דרוג
- סצנות
- שְׁנִיָה
- נראה
- סדרה
- סט
- שיתוף
- קַצרָנוּת
- צריך
- לְהַצִיג
- הופעות
- צד
- צדדים
- סִימָן
- דומה
- פשוט
- since
- יחיד
- ישיבה
- מידה
- So
- עד כה
- מוצק
- פִּתָרוֹן
- פתרונות
- כמה
- משהו
- מֶרחָב
- מרובע
- התחלה
- שלב
- עוד
- עצור
- עוצר
- פשוט
- כזה
- לקחת
- לוקח
- טכניקות
- השמיים
- האזור
- שם.
- דבר
- דברים
- שְׁלִישִׁי
- דרך
- ל
- יַחַד
- חלק עליון
- לגעת
- לשנות
- טרנספורמציה
- טרנספורמציות
- מַעֲבָר
- שָׁקוּף
- נָכוֹן
- us
- להשתמש
- ערך
- ערכים
- נראה
- גלים
- מה
- מה
- אשר
- בזמן
- כל
- יצטרך
- רוח
- תוהה
- מילים
- תיק עבודות
- היה
- טעות
- אתה
- זפירנט