Pruhy pozadia môžete vytvoriť v CSS pomocou lineárneho prechodu. Gradient si často predstavujeme ako vyblednutie z jednej farby na druhú, ale trikom k pruhom je, aby vôbec nebledli. Namiesto toho môžeme určiť „zastavenie farieb“ na rovnakom mieste, aby sa farba okamžite zmenila z jedného (...)
Pruhy pozadia v CSS môžete vytvoriť pomocou linear-gradient. Gradient si často predstavujeme ako vyblednutie z jednej farby do druhej, ale trikom k pruhom je, aby vôbec nebledli. Namiesto toho môžeme určiť „zastavenie farieb“ na rovnakom mieste, aby sa farba okamžite zmenila z jednej na druhú.
Potom sa používa trik, ako to ešte zjednodušiť, repeating-linear-gradienttakže môžeme jednoducho opísať prvých pár pruhov a bude sa prirodzene opakovať:
.element ( background: repeating-linear-gradient( 45deg, #606dbc, #606dbc 10px, #465298 10px, #465298 20px ); )
Ak chcete pruhy animovať spôsobom barberpole, je to otázka animácie background-position. To je tiež len malý ťahák. Ak sa veľkosť vášho prvku nezhoduje s veľkosťou opakujúcich sa pruhov, presunutie polohy na pozadí môže mať za následok nepríjemné pruhy, ako sú tieto:
Namiesto toho, aby ste sa pokúsili dokonale spojiť tieto veľkosti, je jednoduchšie vyhodiť do povetria tých background-position200% a potom animovať ich pozíciu o 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%; ) )