כשאנחנו רוצים לשדרג את הנראות של האתר עם אנימציות מגניבות, נוכל לעשות אנימצית גרדיאנט לרקע של הקונטיינר שלנו בעזרת הקוד הבא ולקונטיינר ניתן את הקאלס הבא: 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%; }
}