Можете направити позадинске пруге у ЦСС-у помоћу линеарног градијента. Често о градијенту размишљамо као о блеђењу једне боје у другу, али трик у пругама је у томе што уопште нема бледе. Уместо тога, можемо да одредимо „заустављања боја“ на истој локацији, тако да се боја тренутно мења са једне (...)
Можете да направите позадинске пруге у ЦСС-у помоћу 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%; ) )