Proge v ozadju lahko naredite v CSS z uporabo linearnega gradienta. Gradient si pogosto predstavljamo kot prehajanje ene barve v drugo, trik pri črtah pa je v tem, da sploh ne bi prišlo do bledenja. Namesto tega lahko na istem mestu določimo "zaustavitve barv", tako da se barva takoj spremeni iz ene (...)
V CSS lahko v CSS naredite proge za ozadje linear-gradient. Gradient si pogosto predstavljamo kot prehajanje ene barve v drugo, trik pri črtah pa je v tem, da sploh ne bi prišlo do bledenja. Namesto tega lahko na istem mestu določimo »zaustavitve barv«, tako da se barva takoj spremeni iz ene v drugo.
Potem je trik, da bi to še lažje uporabili, repeating-linear-gradienttako da lahko samo opišemo prvih nekaj črt in se bo seveda ponovilo:
.element ( background: repeating-linear-gradient( 45deg, #606dbc, #606dbc 10px, #465298 10px, #465298 20px ); )
Da bi črte animirali na način barberpole, je treba animirati background-position. To je tudi samo drobna težava. Če se velikost vašega elementa ne ujema z velikostjo ponavljajočih se črt, lahko premikanje položaja ozadja povzroči neprijetne proge, kot so te:
Namesto da bi se poskušali popolnoma ujemati s temi velikostmi, je lažje razstreliti do background-position200% in nato animirati svoj položaj za 100%.
div ( background-image: repeating-linear-gradient( -45deg, transparent, transparent 1rem, #ccc 1rem, #ccc 2rem ); background-size: 200% 200%; animation: barberpole 10s linear infinite; ) @keyframes barberpole ( 100% ( background-position: 100% 100%; ) )