Anda dapat membuat garis latar belakang di CSS dengan menggunakan gradien linier. Kami sering menganggap gradien sebagai memudar dari satu warna ke warna lain, tetapi trik untuk bergaris adalah tidak memudar sama sekali. Sebagai gantinya, kita dapat menentukan "warna berhenti" di lokasi yang sama, sehingga warna berubah secara instan dari satu (...)
Anda dapat membuat garis latar belakang di CSS dengan menggunakan linear-gradient
. Kita sering menganggap gradien sebagai memudar dari satu warna ke warna lain, tetapi trik untuk bergaris adalah tidak memudar sama sekali. Sebagai gantinya, kita dapat menentukan "warna berhenti" di lokasi yang sama, sehingga warna berubah secara instan dari satu ke yang berikutnya.
Kemudian trik untuk membuatnya lebih mudah digunakan repeating-linear-gradient
sehingga kita bisa menjelaskan beberapa garis pertama dan secara alami akan berulang:
.element ( background: repeating-linear-gradient( 45deg, #606dbc, #606dbc 10px, #465298 10px, #465298 20px ); )
Untuk menganimasikan garis-garis dengan gaya tukang cukur, itu masalah menganimasikan background-position
. Ini juga hanya sedikit rumit. Jika ukuran elemen Anda tidak cocok dengan ukuran strip yang berulang, memindahkan posisi latar belakang dapat menyebabkan beberapa strip tidak nyaman seperti ini:
Daripada mencoba mencocokkan ukuran ini dengan sempurna, lebih mudah untuk meledakkan hingga background-position
200% dan kemudian menghidupkan posisinya hingga 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%; ) )