Galite padaryti fono juostas CSS naudodami tiesinį gradientą. Mes dažnai galvojame apie gradientą apie išblukimą iš vienos spalvos į kitą, tačiau triukų gudrybė yra ta, kad išvis nėra jokio išblukimo. Vietoj to, mes galime nurodyti „spalvų sustojimus“ toje pačioje vietoje, kad spalva iškart pasikeistų iš vienos (…)
Galite padaryti fono juostas CSS naudodami linear-gradient. Mes dažnai galvojame apie gradientą kaip išblukimą iš vienos spalvos į kitą, tačiau juostelės apgauti yra tai, kad išvis nėra jokio išblukimo. Vietoj to, mes galime nurodyti „spalvų sustojimus“ toje pačioje vietoje, kad spalva iškart pasikeistų iš vienos į kitą.
Tada triukas yra dar paprastesnis, repeating-linear-gradientkad galėtume apibūdinti kelias pirmąsias juostas, ir tai natūraliai pasikartos:
.element ( background: repeating-linear-gradient( 45deg, #606dbc, #606dbc 10px, #465298 10px, #465298 20px ); )
Norint animuoti juosteles kirpykloje, tai reikia animuoti background-position. Tai taip pat tik keblumas. Jei elemento dydis neatitinka besikartojančių juostų dydžio, perkėlus fono padėtį, gali atsirasti keletas nepatogių juostų:
Užuot bandžius tobulai suderinti šiuos dydžius, lengviau susprogdinti iki background-position200% ir tada animuoti jo poziciją 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%; ) )
