איך עושים אנימציית "הקלדה" ב-CSS בלבד?
בפוסט הזה נלמד איך בונים אנימציית הקלדה ב-CSS בלבד! שימוש ב-steps() כדי לדמות כתיבה מדויקת, טיפים ליצירת קו מהבהב, וקריצה קטנה לכל מי שחושב ש-anime זה עדיין מגניב.
איך עושים אנימציית "הקלדה" בcss?
😏 ⚠ אזהרת חנונים דרגה 2. 👨👩👧👧 נו מה עכשיו אנימציות... 😎 למה ככה? 😎 שתדעו לכם שמה שהכי מרגיז אתכם זה מה שיחשל אתכם! (ועוד לקט מנטרות אוויליות של ילדי טיקטוק שהשקיעו את כל דמי הפורים שלהם בלונג על מטבע עם שם של זוחל מטנזניה אחרי שמישהו מהשכבה שלהם נשבע להם שהוא עולה בסופ"ש במליארד אחוז. כי אח שלו שמגרד חישגד מגיל 6 אמר לו). אז בגדול מצורף פה בcodepen את הקוד שעושה אנימצית הקלדה:
👨👩👧👧 נשברנו, תסביר קצת? 😎 הדברים העיקריים: בהגדרת האנימציה יש את שם האנימציה כמצופה (2 מהם( animation-name* וinfinite - כמה פעמים לחזור על האנימציה animation-iteration-count*. אחת מהם שעושה את הקו המהבהב מצד שמאל - פשוטה למדיי. פשוט משחק עם הצבע של הborder מצד שמאל. 🥱 והשניה שמשחקת עם הwidth של הh1, והקטע הקצת מיוחד זה הפונקציה steps() שמחלקת את האנימציה לקפיצות כדי לדמות הקלדה (וקנגרו עם אולקוס). 👺 וטא דאםםםםםם יש לנו אנימציה שיש שיגידו שהיא מגניבה, ויש שיגידו תמצא נושא אחר ותעזוב אותנו
שתף את המאמר
נכתב על ידי
Yosefus Flavius
מתכנת מוכשר בחסד עליון ככה אומרים עלי כולם - לפחות בפרצוף שלי, אני אוהב ומעולה בלטייל ולתכנן טיולים בעיקר במדינות מגניבות, ואני צלם חובב כבר מעל 10 שנים.
עקבו באינסטגרם