Možete napraviti pozadinske pruge u CSS-u pomoću linearnog gradijenta. Na gradijent često mislimo kao na blijeđenje jedne boje u drugu, ali trik u prugama je u tome da uopće nema blijeđenja. Umjesto toga, možemo odrediti "zaustavljanja boja" na istom mjestu, tako da se boja trenutno mijenja s jednog (...)
Možete napraviti pozadinske pruge u CSS-u pomoću linear-gradient. Na gradijent često mislimo kao na blijeđenje jedne boje u drugu, ali trik u prugama je u tome što uopće nema blijeđenja. Umjesto toga, možemo odrediti "zaustavljanje boja" na istom mjestu, tako da se boja trenutno mijenja od jedne do druge.
Tada se koristi trik da to učinite još lakšim, repeating-linear-gradienttako da možemo samo opisati prvih nekoliko pruga i prirodno će se ponoviti:
.element ( background: repeating-linear-gradient( 45deg, #606dbc, #606dbc 10px, #465298 10px, #465298 20px ); )
Da biste pruge animirali na način brijača, pitanje je animiranja background-position. Ovo je također samo pomalo škakljivo. Ako se veličina vašeg elementa ne podudara s veličinom pruga koje se ponavljaju, pomicanje položaja pozadine može rezultirati nekim neugodnim prugama poput ovih:
Umjesto da pokušate savršeno prilagoditi ove veličine, lakše je raznijeti do background-position200% i zatim animirati njegov 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%; ) )