Możesz tworzyć paski tła w CSS, używając gradientu liniowego. Często myślimy o gradiencie jako przejściu z jednego koloru do drugiego, ale sztuczka z paskami polega na tym, aby w ogóle nie mieć żadnego zanikania. Zamiast tego możemy określić „przystanki koloru” w tym samym miejscu, tak aby kolor zmieniał się natychmiast z jednego (…)
Możesz tworzyć paski tła w CSS za pomocą linear-gradient. Często myślimy o gradiencie jako przejściu z jednego koloru do drugiego, ale sztuczka z paskami polega na tym, aby w ogóle nie mieć żadnego zanikania. Zamiast tego możemy określić „przystanki koloru” w tym samym miejscu, tak aby kolor zmieniał się natychmiastowo z jednego na drugi.
Następnie sztuczka, która ma to jeszcze ułatwić, polega na repeating-linear-gradienttym, że możemy opisać tylko kilka pierwszych pasków i naturalnie się powtórzy:
.element ( background: repeating-linear-gradient( 45deg, #606dbc, #606dbc 10px, #465298 10px, #465298 20px ); )
Aby ożywić paski w stylu barberpole, wystarczy ożywić plik background-position. To także jest trochę trudne. Jeśli rozmiar elementu nie pasuje do rozmiaru powtarzających się pasków, przesunięcie pozycji tła może spowodować powstanie niezręcznych pasków, takich jak te:
Zamiast próbować idealnie dopasować te rozmiary, łatwiej jest wysadzić background-positiondo 200%, a następnie ożywić jego pozycję 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%; ) )