טקסט מסתובב באנימצייה קבועה

טקסט מסתובב באנימצייה קבועה באלמנטור - טרנד עיצובי שתפגשו בהמון אתרים ועם ההדרכה הבאה תדעו גם להשתמש בה בפרויקטים שלכם >>

אנחנו רואים בהמון אתרי אלמנטור את האנימציית טקסט המגניבה. והיא בהחלט מוסיפה עניין לעיצוב שלנו. המדריך ליצירת טקסט מסתובב.

שלב ראשון ליצירת טקסט מסתובב

גררו אלמנט בשם נתיב טקסט מאלמנטור שנראה כך: 

טקסט מסתובב באנימצייה קבועה

בסוג נתיב תבחרו מעגלי כדי שזה יהיה עיגול

תנו לאלמנט גודל של 150 PX כדי שיתאים את עצמו ולא יהיה רחב מידיי. ובריווח מילים כ10 PX או שחקו עד לקבלת מבנה עיצובי כרצונכם. ואז הדביקו בCSS מותאם את הקוד הבא

				
					selector svg{
    animation: rotate 20s linear infinite;
}

@-webkit-keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
				
			

ועכשיו האנימציית טקסט עובדת כמו שאתם רוצים. עדכנו אותי אם זה עזר לכם. בהצלחה 🙂

2 תגובות

  1. האלמנטור פרו לא נותן לי להדביק את הקוד, הוא מבקש לשדרג. את החבילה. למה?

    1. היי אתי, אני מניח שרכשת את האלמנטור פרו לאתר אחד נכון? במידה וכך צרי איתי קשר אסביר לך את האפשרויות כדי שכל האופציות יהיו לך פתוחות

כתיבת תגובה

האימייל לא יוצג באתר. שדות החובה מסומנים *