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