ראשיאודותטיוליםצילוםfull Stack
Yosefus FlaviusYosefus Flavius

Yosefus flavius

אני בעצמי

קישורים מהירים

  • דף הבית
  • אודות
  • בלוג
logo

© 2025 Yosefus Flavius WebDeveloper

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

איך עושים אנימציית "הקלדה" ב-CSS בלבד?

  1. בית
  2. >
  3. Full Stack
6 בנובמבר 2024• זמן קריאה: 1 דקות

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

איך עושים אנימציית "הקלדה" בcss?

😏 ⚠ אזהרת חנונים דרגה 2. 👨‍👩‍👧‍👧 נו מה עכשיו אנימציות... 😎 למה ככה? 😎 שתדעו לכם שמה שהכי מרגיז אתכם זה מה שיחשל אתכם! (ועוד לקט מנטרות אוויליות של ילדי טיקטוק שהשקיעו את כל דמי הפורים שלהם בלונג על מטבע עם שם של זוחל מטנזניה אחרי שמישהו מהשכבה שלהם נשבע להם שהוא עולה בסופ"ש במליארד אחוז. כי אח שלו שמגרד חישגד מגיל 6 אמר לו). אז בגדול מצורף פה בcodepen את הקוד שעושה אנימצית הקלדה:

👨‍👩‍👧‍👧 נשברנו, תסביר קצת? 😎 הדברים העיקריים: בהגדרת האנימציה יש את שם האנימציה כמצופה (2 מהם( animation-name* וinfinite - כמה פעמים לחזור על האנימציה animation-iteration-count*. אחת מהם שעושה את הקו המהבהב מצד שמאל - פשוטה למדיי. פשוט משחק עם הצבע של הborder מצד שמאל. 🥱 והשניה שמשחקת עם הwidth של הh1, והקטע הקצת מיוחד זה הפונקציה steps() שמחלקת את האנימציה לקפיצות כדי לדמות הקלדה (וקנגרו עם אולקוס). 👺 וטא דאםםםםםם יש לנו אנימציה שיש שיגידו שהיא מגניבה, ויש שיגידו תמצא נושא אחר ותעזוב אותנו

linkedin
whatsapp
facebook
x
Y

Yosefus Flavius

כותב הבלוג

כתבות קשורות

כתבות דומות

CSS Mix-blend-mode: איך לשלב תוכן עם הרקע
27 באפריל 2025
Full Stack>>פרונט אנד

CSS Mix-blend-mode: איך לשלב תוכן עם הרקע

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

@apply ב־Tailwind: מה זה ואיך להשתמש בזה נכון
27 באפריל 2025
Full Stack>>פרונט אנד

@apply ב־Tailwind: מה זה ואיך להשתמש בזה נכון

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

כל מה שצריך לדעת על צבעים ב־Tailwind CSS: טיפים, טריקים ואינטואיציה ️
27 באפריל 2025
Full Stack>>פרונט אנד

כל מה שצריך לדעת על צבעים ב־Tailwind CSS: טיפים, טריקים ואינטואיציה ️

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