אנימצייה מהמרכז לצדדים בהובר על תפריט

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

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

כך יראה התפריט עם הקוד:

				
					selector nav li{
    text-align: center;
    text-transform: uppercase;
}
selector li > a:after{
    content: '';
    display: block;
    height: 1.5px;
    background: #FBC02D;
    transform: scaleX(0);
    transition: transform .3s;
}
selector li > a:hover:after{
    transform: scaleX(1);
    transition: transform .4s;
}
				
			

קודים נוספים

התפריט הוא אחד הדברים הראשונים שאנשים רואים כשהם נכנסים לאתר.עוד לפני שקוראים טקסט או לוחצים [...]

אפקטים קטנים עושים הבדל גדול בחוויית משתמש – במיוחד כשמדובר באינטראקציות בסיסיות כמו מעבר עכבר. [...]

אם אתם בונים אתרים רספונסיביים, אתם יודעים שטיפוגרפיה יכולה להיות כאב ראש – במיוחד כשצריך [...]