Вы можете создавать полосы фона в CSS с помощью linear-gradient. Мы часто думаем о градиенте как о переходе от одного цвета к другому, но уловка с полосами заключается в том, чтобы не иметь никакого исчезновения. Вместо этого мы можем указать «остановки цвета» в том же месте, чтобы цвет мгновенно менялся с одного (…)
Вы можете создавать полосы фона в CSS, используя linear-gradient. Мы часто думаем о градиенте как о переходе от одного цвета к другому, но уловка с полосами заключается в том, чтобы не иметь никакого исчезновения. Вместо этого мы можем указать «остановки цвета» в одном и том же месте, чтобы цвет мгновенно менялся от одного к другому.
Затем можно использовать трюк, чтобы сделать это еще проще: repeating-linear-gradientмы можем просто описать первые несколько полос, и они, естественно, будут повторяться:
.element ( background: repeating-linear-gradient( 45deg, #606dbc, #606dbc 10px, #465298 10px, #465298 20px ); )
Чтобы оживить полосы в стиле парикмахерской, нужно анимировать файл background-position. Это тоже немного сложно. Если размер вашего элемента не соответствует размеру повторяющихся полос, перемещение background-position может привести к появлению таких неудобных полос, как эти:
Вместо того, чтобы пытаться идеально подобрать эти размеры, проще увеличить размер background-positionдо 200%, а затем анимировать его положение на 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%; ) )