Puede crear franjas de fondo en CSS usando degradado lineal. A menudo pensamos en un degradado como un desvanecimiento de un color a otro, pero el truco para las rayas es no tener ningún desvanecimiento. En su lugar, podemos especificar "paradas de color" en la misma ubicación, de modo que el color cambie instantáneamente de uno (...)
Puede crear franjas de fondo en CSS usando linear-gradient. A menudo pensamos en un degradado como un desvanecimiento de un color a otro, pero el truco para las rayas es no tener ningún desvanecimiento. En su lugar, podemos especificar "paradas de color" en la misma ubicación, de modo que el color cambie instantáneamente de uno a otro.
Entonces, el truco para hacerlo aún más fácil es usar repeating-linear-gradientpara que podamos describir las primeras rayas y, naturalmente, se repetirá:
.element ( background: repeating-linear-gradient( 45deg, #606dbc, #606dbc 10px, #465298 10px, #465298 20px ); )
Para animar las rayas a la manera de un barbero, es cuestión de animar el background-position. Esto también es un poco complicado. Si el tamaño de su elemento no coincide con el tamaño de las franjas repetidas, mover la posición del fondo puede resultar en algunas franjas incómodas como estas:
En lugar de tratar de hacer coincidir estos tamaños a la perfección, es más fácil aumentar el background-position200% y luego animar su posición en un 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%; ) )