Можете да направите фонови ивици в CSS, като използвате линеен градиент. Често мислим за градиент като избледняване от един цвят в друг, но трикът на ивиците е изобщо да няма избледняване. Вместо това можем да посочим „спиране на цветовете“ на едно и също място, така че цветът да се променя незабавно от едно (...)
Можете да направите фонови ивици в CSS, като използвате linear-gradient. Често мислим за градиент като избледняване от един цвят в друг, но трикът на ивиците е изобщо да няма избледняване. Вместо това можем да посочим „спиране на цветовете“ на едно и също място, така че цветът да се променя незабавно от един на друг.
Тогава трикът да направите това още по-лесно е да използвате, repeating-linear-gradientза да можем просто да опишем първите няколко ивици и той естествено ще се повтори:
.element ( background: repeating-linear-gradient( 45deg, #606dbc, #606dbc 10px, #465298 10px, #465298 20px ); )
За да анимирате ивиците по начин на бръснар, е въпрос на анимиране на background-position. Това също е малко хитро. Ако размерът на елемента ви не съвпада с размера на повтарящите се ивици, преместването на фоновото положение може да доведе до някои неудобни ивици като тези:
Вместо да се опитвате да съчетаете идеално тези размери, е по-лесно да взривите до background-position200% и след това да анимирате позицията си със 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%; ) )