U kunt achtergrondstrepen in CSS maken met behulp van lineair verloop. We beschouwen een verloop vaak als een vervaging van de ene kleur naar de andere, maar de truc bij strepen is om helemaal geen vervaging te hebben. In plaats daarvan kunnen we "kleurstops" op dezelfde locatie specificeren, zodat de kleur onmiddellijk verandert vanaf één (...)
U kunt achtergrondstrepen in CSS maken met linear-gradient. We beschouwen een verloop vaak als een vervaging van de ene kleur naar de andere, maar de truc bij strepen is om helemaal geen vervaging te hebben. In plaats daarvan kunnen we "kleurstops" op dezelfde locatie specificeren, zodat de kleur onmiddellijk van de ene naar de andere verandert.
Dan is de truc om dit nog gemakkelijker te maken het gebruik van repeating-linear-gradientzodat we de eerste paar strepen kunnen beschrijven en het zal zich natuurlijk herhalen:
.element ( background: repeating-linear-gradient( 45deg, #606dbc, #606dbc 10px, #465298 10px, #465298 20px ); )
Om de strepen op een barberpole-manier te animeren, is het een kwestie van de background-position. Dit is ook gewoon een beetje lastig. Als de grootte van uw element niet overeenkomt met de grootte van de herhalende strepen, kan het verplaatsen van de achtergrondpositie resulteren in enkele ongemakkelijke strepen zoals deze:
In plaats van te proberen deze maten perfect op elkaar af te stemmen, is het gemakkelijker om de background-position200% op te blazen en vervolgens de positie met 100% te animeren.
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%; ) )