Voit tehdä taustaraitoja CSS: ssä käyttämällä lineaarista gradienttia. Ajattelemme kaltevuutta usein haalistumisena väristä toiseen, mutta raidan temppu on, ettei siinä ole lainkaan haalistumista. Sen sijaan voimme määrittää "väripysähdykset" samaan paikkaan siten, että väri muuttuu välittömästi yhdestä (…)
Voit tehdä taustaraitoja CSS: ssä käyttämällä linear-gradient. Ajattelemme kaltevuutta usein haalistumisena väristä toiseen, mutta raidan temppu on, ettei siinä ole lainkaan haalistumista. Sen sijaan voimme määrittää "väripysähdykset" samaan paikkaan siten, että väri vaihtuu välittömästi yhdestä toiseen.
Sitten temppu tämän helpottamiseksi on vielä käyttää, repeating-linear-gradientjotta voimme vain kuvata muutaman ensimmäisen raidan, ja se luonnollisesti toistuu:
.element ( background: repeating-linear-gradient( 45deg, #606dbc, #606dbc 10px, #465298 10px, #465298 20px ); )
Jos haluat animoida raidat parturi-tyyliin, on kyse animaatiosta background-position. Tämä on myös vain smeach hankala. Jos elementtisi koko ei vastaa toistuvien raitojen kokoa, taustan sijainnin siirtäminen voi aiheuttaa joitain hankalia raitoja kuten nämä:
Sen sijaan, että yrität sovittaa nämä koot täydellisesti, on helpompaa räjäyttää background-position200% ja animoida sen sijainti 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%; ) )