Dodaj trochę więcej ruchu na swojej stronie z animacją gradientu CSS. Technika ta została utworzona za pomocą witryny „gradient-animator” z kilkoma modyfikacjami kodu dla szablonu DIVI tak aby działało wszystko jak należy. Użyłem tego na stronie głównej AKF Design.

  1. Po pierwsze trzeba będzie dodać klasę CSS do sekcji na jakiej ma się pojawić efekt. W tym przypadku „animate-area”.
  2. Dodaj poniższe wiersze do swojego panelu „Niestandardowe CSS” w opcjach tematycznych szablonu. Można zmieniać kolory edytując „background: linear-gradient(180 deg, # 253b46 , # 0f5f68, # 3a134a); Jeśli dodasz więcej niż 3 kolory będzie trzeba także dostosować „background-size: 600% 600%;” gdzie każdy kolor jest reprezentowany przez dodatkowe 200%
  3. Miłej zabawy!

 

@-webkit-keyframes animatedBack {
0%{background-position:50% 0%}
50%{background-position:50% 100%}
100%{background-position:50% 0%}
}
@-moz-keyframes animatedBack {
0%{background-position:50% 0%}
50%{background-position:50% 100%}
100%{background-position:50% 0%}
}
@keyframes animatedBack {
0%{background-position:50% 0%}
50%{background-position:50% 100%}
100%{background-position:50% 0%}
}


.animate-area {
background: linear-gradient(180deg, #253b46, #0f5f68, #3a134a);
background-size: 600% 600%;
-webkit-animation: animatedBack 5s ease infinite;
-moz-animation: animatedBack 5s ease infinite;
animation: animatedBack 5s ease infinite;
}

Pin It on Pinterest

Share This