CSS-is saate teha ribaribasid, kasutades lineaarset gradienti. Me mõtleme gradiendilt sageli ühelt värvilt teisele tuhmumisena, kuid triipude trikk on see, et neil pole üldse pleekimist. Selle asemel võime samas kohas määrata „värvipeatused“, nii et värv muutub koheselt ühest (…)
CSS-is saate teha taustaribasid, kasutades linear-gradient. Me mõtleme gradiendilt sageli ühelt värvilt teisele tuhmumisena, kuid triipude trikk on see, et neil pole üldse pleekimist. Selle asemel võime samas kohas määratleda „värvipeatused“, nii et värv muutub koheselt ühest teise.
Siis on selle veelgi lihtsamaks muutmise nipp, repeating-linear-gradientet saaksime lihtsalt kirjeldada paari esimest triipu ja see kordub loomulikult:
.element ( background: repeating-linear-gradient( 45deg, #606dbc, #606dbc 10px, #465298 10px, #465298 20px ); )
Triipude animeerimiseks habemeajamiga on animeerimise küsimus background-position. See on ka lihtsalt kohmakas keeruline. Kui teie elemendi suurus ei ühti korduvate triipude suurusega, võib taustaasendi nihutamine põhjustada ebamugavaid triipe:
Selle asemel, et proovida neid suurusi ideaalselt kokku sobitada, on lihtsam õhkida kuni background-position200% ja seejärel animeerida selle positsiooni 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%; ) )