רקע גראדינאט עם אנימציה מתחלפת

כשאנחנו רוצים לשדרג את הנראות של האתר עם אנימציות מגניבות, נוכל לעשות אנימצית גרדיאנט לרקע של הקונטיינר שלנו בעזרת הקוד הבא ולקונטיינר ניתן את הקאלס הבא: animated-bg.

שימו לב שבשורה 2 יש לנו את שלושת הצבעים שמתחלפים באנימציה.

 

קונטיינר עם אנימציית צבע מגניבה

				
					.animated-bg {
  background: linear-gradient(270deg, #22C1C3, #AB2E92, #FDBB2D);
  background-size: 600% 600%;
  animation: gradientShift 12s ease infinite;
}

@keyframes gradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
				
			

קודים נוספים

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

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

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