Du kan lage bakgrunnsstriper i CSS ved å bruke lineær gradient. Vi tenker ofte på en gradient som en falming fra en farge til en annen, men trikset til striper er å ikke ha noen falming i det hele tatt. I stedet kan vi spesifisere "fargestopp" på samme sted, slik at fargen endres øyeblikkelig fra en (...)
Du kan lage bakgrunnsstriper i CSS ved å bruke linear-gradient. Vi tenker ofte på en gradient som en falming fra en farge til en annen, men trikset til striper er å ikke ha noen falming i det hele tatt. I stedet kan vi spesifisere “fargestopp” på samme sted, slik at fargen skifter øyeblikkelig fra ett til et annet.
Så er trikset for å gjøre dette enda enklere å bruke, repeating-linear-gradientslik at vi bare kan beskrive de første stripene, og det vil naturlig gjenta:
.element ( background: repeating-linear-gradient( 45deg, #606dbc, #606dbc 10px, #465298 10px, #465298 20px ); )
For å animere stripene på en barberpole-måte, handler det om å animere background-position. Dette er også bare vanskelig. Hvis størrelsen på elementet ditt ikke samsvarer med størrelsen på de gjentatte stripene, kan flytting av bakgrunnsposisjonen føre til noen vanskelige striper som disse:
I stedet for å prøve å matche disse størrelsene perfekt, er det lettere å sprenge opp background-positiontil 200% og deretter animere posisjonen 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%; ) )