Puteți face dungi de fundal în CSS utilizând gradient liniar. De multe ori ne gândim la un gradient ca la o estompare de la o culoare la alta, dar trucul pentru dungi este să nu ai deloc stingeri. În schimb, putem specifica „oprirea culorii” în aceeași locație, astfel încât culoarea să se schimbe instantaneu dintr-una (...)
Puteți face dungi de fundal în CSS folosind linear-gradient. De multe ori ne gândim la un gradient ca la o estompare de la o culoare la alta, dar trucul pentru dungi este să nu ai deloc stingeri. În schimb, putem specifica „opriri de culoare” în aceeași locație, astfel încât culoarea să se schimbe instantaneu de la una la alta.
Apoi, trucul pentru a face acest lucru și mai ușor este utilizarea, repeating-linear-gradientastfel încât să putem descrie primele dungi și se va repeta în mod natural:
.element ( background: repeating-linear-gradient( 45deg, #606dbc, #606dbc 10px, #465298 10px, #465298 20px ); )
Pentru a anima dungile într-un mod barberpole, este o chestiune de a anima background-position. Acesta este, de asemenea, doar un smidge dificil. Dacă dimensiunea elementului dvs. nu se potrivește cu dimensiunea dungilor repetate, mișcarea poziției de fundal poate duce la niște dungi incomode ca acestea:
În loc să încercați să combinați perfect aceste dimensiuni, este mai ușor să explodați până background-positionla 200% și apoi să animați poziția cu 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%; ) )