Izmantojot lineāro gradientu, CSS var izveidot fona svītras. Mēs bieži domājam par gradientu kā par izbalēšanu no vienas krāsas uz otru, bet svītru triks ir tāds, ka vispār nav izbalēšanas. Tā vietā mēs varam norādīt “krāsu pieturas” tajā pašā vietā, lai krāsa uzreiz mainītos no vienas (…)
Izmantojot CSS, varat izveidot CSS fona svītras linear-gradient. Mēs bieži domājam par gradientu kā par izbalēšanu no vienas krāsas uz otru, bet svītru triks ir tāds, ka vispār nav izbalēšanas. Tā vietā mēs varam norādīt “krāsu pieturas” tajā pašā vietā tā, lai krāsa uzreiz mainītos no vienas uz otru.
Tad triks, lai to padarītu vēl vienkāršāku, ir izmantot, repeating-linear-gradientlai mēs varētu vienkārši aprakstīt dažas pirmās svītras, un tas, protams, atkārtosies:
.element ( background: repeating-linear-gradient( 45deg, #606dbc, #606dbc 10px, #465298 10px, #465298 20px ); )
Lai animētu svītras frizētavā, tas ir animācijas jautājums background-position. Tas arī ir tikai grūts grūts. Ja elementa lielums neatbilst atkārtojošo svītru izmēram, fona stāvokļa pārvietošana var radīt dažas neērtas svītras, piemēram:
Tā vietā, lai mēģinātu perfekti saskaņot šos izmērus, ir vieglāk uzspridzināt līdz background-position200% un pēc tam animēt tā pozīciju par 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%; ) )