Du kan lave baggrundsstriber i CSS ved hjælp af lineær gradient. Vi tænker ofte på en gradient som en fade fra en farve til en anden, men tricket til striber er ikke at have nogen fade overhovedet. I stedet kan vi specificere "farvestop" på samme sted, således at farven ændrer sig med det samme fra en (...)
Du kan lave baggrundsstriber i CSS ved hjælp af linear-gradient. Vi tænker ofte på en gradient som en fade fra en farve til en anden, men tricket til striber er ikke at have nogen fade overhovedet. I stedet kan vi specificere "farvestop" på samme sted, således at farven skifter med det samme fra den ene til den næste.
Derefter bruger tricket for at gøre dette endnu lettere, repeating-linear-gradientså vi bare kan beskrive de første par striber, og det gentages naturligvis:
.element ( background: repeating-linear-gradient( 45deg, #606dbc, #606dbc 10px, #465298 10px, #465298 20px ); )
For at animere striberne på en barberpolemåde er det et spørgsmål om at animere background-position. Dette er også bare en smidsig vanskelig. Hvis størrelsen på dit element ikke svarer til størrelsen på de gentagne striber, kan flytning af baggrundspositionen resultere i nogle akavede striber som disse:
I stedet for at prøve at matche disse størrelser perfekt, er det lettere at sprænge de op background-positiontil 200% og derefter animere dens 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%; ) )