Você pode fazer listras de fundo em CSS usando gradiente linear. Freqüentemente pensamos em gradiente como um desbotamento de uma cor para outra, mas o truque das listras é não ter desbotamento. Em vez disso, podemos especificar "interrupções de cor" no mesmo local, de modo que a cor mude instantaneamente de um (...)
Você pode fazer listras de fundo em CSS usando linear-gradient. Freqüentemente pensamos em gradiente como um desbotamento de uma cor para outra, mas o truque das listras é não ter desbotamento. Em vez disso, podemos especificar “paradas de cor” no mesmo local, de modo que a cor mude instantaneamente de um para o outro.
Então, o truque para tornar isso ainda mais fácil é usar, repeating-linear-gradientpara que possamos apenas descrever as primeiras listras e ele se repetirá naturalmente:
.element ( background: repeating-linear-gradient( 45deg, #606dbc, #606dbc 10px, #465298 10px, #465298 20px ); )
Para animar as listras à maneira de uma vara de barbeiro, é uma questão de animar o background-position. Este também é apenas um pouco complicado. Se o tamanho do seu elemento não corresponder ao tamanho das listras repetidas, mover a posição do fundo pode resultar em algumas listras estranhas como estas:
Em vez de tentar combinar esses tamanhos perfeitamente, é mais fácil aumentar background-positionpara 200% e então animar sua posição em 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%; ) )