Du kan skapa bakgrundsränder i CSS med linjär gradient. Vi tänker ofta på en lutning som en blekning från en färg till en annan, men tricket till ränder är att inte ha någon blekning alls. Istället kan vi ange "färgstopp" på samma plats, så att färgen ändras direkt från en (...)
Du kan skapa bakgrundsränder i CSS genom att använda linear-gradient. Vi tänker ofta på en lutning som en blekning från en färg till en annan, men tricket till ränder är att inte ha någon blekning alls. Istället kan vi ange "färgstopp" på samma plats, så att färgen ändras direkt från en till en annan.
Då är tricket för att göra detta ännu enklare att använda repeating-linear-gradientså vi kan bara beskriva de första ränderna och det kommer naturligtvis att upprepas:
.element ( background: repeating-linear-gradient( 45deg, #606dbc, #606dbc 10px, #465298 10px, #465298 20px ); )
För att animera ränderna på en barberpolsmodell handlar det om att animera background-position. Detta är också bara en knepig smuts. Om storleken på ditt element inte överensstämmer med storleken på de upprepade ränderna, kan flyttning av bakgrundsposition resultera i några besvärliga ränder som dessa:
Istället för att försöka matcha dessa storlekar perfekt är det lättare att spränga upp background-positiontill 200% och sedan animera dess position med 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%; ) )