Μπορείτε να δημιουργήσετε ρίγες φόντου σε CSS χρησιμοποιώντας γραμμική κλίση. Συχνά σκεφτόμαστε μια κλίση ως ξεθώριασμα από το ένα χρώμα στο άλλο, αλλά το κόλπο για ρίγες είναι να μην έχει καθόλου εξασθένιση. Αντ 'αυτού, μπορούμε να καθορίσουμε "στάσεις χρώματος" στην ίδια θέση, έτσι ώστε το χρώμα να αλλάζει αμέσως από ένα (…)
Μπορείτε να δημιουργήσετε ρίγες φόντου σε CSS χρησιμοποιώντας linear-gradient. Συχνά σκεφτόμαστε μια κλίση ως ξεθώριασμα από το ένα χρώμα στο άλλο, αλλά το κόλπο για ρίγες είναι να μην έχει καθόλου εξασθένιση. Αντ 'αυτού, μπορούμε να καθορίσουμε "στάσεις χρώματος" στην ίδια θέση, έτσι ώστε το χρώμα να αλλάζει αμέσως από το ένα στο άλλο.
Στη συνέχεια, το κόλπο για να γίνει αυτό ακόμη πιο εύκολο είναι να χρησιμοποιήσουμε, repeating-linear-gradientώστε να μπορούμε να περιγράψουμε τις πρώτες λίγες ρίγες και φυσικά θα επαναληφθεί:
.element ( background: repeating-linear-gradient( 45deg, #606dbc, #606dbc 10px, #465298 10px, #465298 20px ); )
Για να ζωντανεύσετε τις ρίγες με τρόπο κούτσουρο, είναι θέμα ζωτικότητας του background-position. Αυτό είναι επίσης απλώς ένα δύσκολο. Εάν το μέγεθος του στοιχείου σας δεν ταιριάζει με το μέγεθος των επαναλαμβανόμενων λωρίδων, η μετακίνηση της θέσης φόντου μπορεί να οδηγήσει σε μερικές αδέξιες ρίγες όπως αυτές:
Αντί να προσπαθήσετε να ταιριάξετε τέλεια αυτά τα μεγέθη, είναι ευκολότερο να ανατινάξετε το background-position200% και στη συνέχεια να ενεργοποιήσετε τη θέση του κατά 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%; ) )