Puoi creare strisce di sfondo in CSS utilizzando gradiente lineare. Spesso pensiamo a una sfumatura come una dissolvenza da un colore a un altro, ma il trucco per le strisce è di non avere alcuna dissolvenza. Invece, possiamo specificare "interruzioni di colore" nella stessa posizione, in modo tale che il colore cambi istantaneamente da uno (...)
Puoi creare strisce di sfondo in CSS usando linear-gradient. Spesso pensiamo a una sfumatura come una dissolvenza da un colore a un altro, ma il trucco per le strisce è di non avere alcuna dissolvenza. Invece, possiamo specificare "interruzioni di colore" nella stessa posizione, in modo che il colore cambi istantaneamente da uno all'altro.
Quindi il trucco per renderlo ancora più semplice è usare, repeating-linear-gradientquindi possiamo solo descrivere le prime strisce e si ripeterà naturalmente:
.element ( background: repeating-linear-gradient( 45deg, #606dbc, #606dbc 10px, #465298 10px, #465298 20px ); )
Per animare le strisce in stile barberpole, si tratta di animare il file background-position. Anche questo è solo un po 'complicato. Se la dimensione del tuo elemento non corrisponde alla dimensione delle strisce che si ripetono, lo spostamento della posizione dello sfondo potrebbe causare strisce scomode come queste:
Piuttosto che cercare di abbinare perfettamente queste dimensioni, è più facile gonfiare il background-position200% e quindi animare la sua posizione del 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%; ) )