A lineáris gradiens használatával CSS-ben háttércsíkokat készíthet. A színátmenetről gyakran azt gondoljuk, hogy egyik színről a másikra elhalványul, de a csíkos trükk az, hogy egyáltalán nincs elhalványulás. Ehelyett megadhatunk „színmegállókat” ugyanazon a helyen, úgy, hogy a szín azonnal változzon egyről (…)
A CSS használatával háttércsíkokat készíthet linear-gradient. A színátmenetről gyakran azt gondoljuk, hogy egyik színről a másikra elhalványul, de a csíkos trükk az, hogy egyáltalán nincs elhalványulás. Ehelyett megadhatunk „színmegállókat” ugyanabban a helyen, úgy, hogy a szín azonnal változzon egyikről a másikra.
Ezután a trükk, hogy ezt még könnyebbé tegyük, az repeating-linear-gradient, hogy le tudjuk írni az első néhány csíkot, és természetesen megismétlődik:
.element ( background: repeating-linear-gradient( 45deg, #606dbc, #606dbc 10px, #465298 10px, #465298 20px ); )
A csíkok fodrászatban történő animálásához animáció kérdése background-position. Ez is csak egy mocskos trükk. Ha az elem mérete nem egyezik az ismétlődő csíkok méretével, a háttér helyzetének elmozdítása néhány kellemetlen csíkot eredményezhet:
Ahelyett, hogy megpróbálná ezeket a méreteket tökéletesen összehangolni, könnyebb felrobbantani a background-position200% -ot, majd 100% -kal animálni a helyzetét.
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%; ) )