Pruhy pozadí můžete vytvořit v CSS pomocí lineárního přechodu. Gradient si často představujeme jako slábnutí z jedné barvy na druhou, ale trik s pruhy spočívá v tom, že vůbec nevybledne. Místo toho můžeme určit „zarážky barev“ na stejném místě, takže se barva okamžitě změní z jedné (...)
Pruhy pozadí můžete v CSS vytvořit pomocí linear-gradient. Gradient si často představujeme jako slábnutí z jedné barvy na druhou, ale trik s pruhy spočívá v tom, že vůbec nevybledne. Místo toho můžeme určit „zarážky barev“ na stejném místě, takže se barva okamžitě změní z jedné na druhou.
Pak se používá trik, jak to ještě usnadnit, repeating-linear-gradienttakže můžeme jen popsat prvních několik pruhů a bude se přirozeně opakovat:
.element ( background: repeating-linear-gradient( 45deg, #606dbc, #606dbc 10px, #465298 10px, #465298 20px ); )
Chcete-li animovat pruhy barberpole, je to otázka animace background-position. To je také jen trochu komplikované. Pokud velikost vašeho prvku neodpovídá velikosti opakujících se pruhů, přesunutí polohy na pozadí může mít za následek nepříjemné pruhy, jako jsou tyto:
Spíše než se snažit tyto velikosti dokonale spojit, je snazší vyhodit do povětří background-position200% a poté animovat jejich pozici o 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%; ) )