ראשיאודותטיוליםצילוםfull Stackמדינות
Yosefus Flaviuswebsite logo

Yosefus flavius

אני בעצמי

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

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

©2025 Yosefus Flavius WebDeveloper

איך לגרום ל-SVG "לצייר את עצמו" בעזרת CSS בלבד - מדריך מקיף עם טיפים ומידע שימושי

איך לגרום ל-SVG "לצייר את עצמו" בעזרת CSS בלבד

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

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

תוכן המאמר

והפעם לכבוד תחילת השבוע, ויום ראשון האהוב על כולנו. 😣 לאחת האנימציות האהובות עלי - svg שמצייר את עצמו על המסך. האנימציה נפוצה מאוד כמו בדוגמא שאצרף, כקריצה חמודה אחרי שליחה של טופס וכדומה. והמפתיע: שאפשר לעשות אותה בcss בלבד. ♥ העיקרון: אנחנו "מקוקוים" את הקו של הsvg בקו באורך כל הקו עצמו מה שגורם לו להיראות ריק, ואז בהדרגה אנחנו חושפים את הקו. ובעזרת animation-fill-mode אנחנו מבקשים מהאנימציה שאחרי שהיא מסיימת שתישאר על המצב הסופי שהוא בעצם הsvg המלא. וחלאס. מגניב או כן? תחיו לנצח ולא תמותו אפעם. שבוע מבורך 🚀

שתף את המאמר

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, כולל הצבעים המובנים, שמות אינטואיטיביים, וריאציות צבעים ודרכים להוסיף ולהתאים אישית את פלטת הצבעים בעזרת הקונפיגורציה.