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