Anda boleh membuat garis latar dalam CSS dengan menggunakan kecerunan linear. Kita sering menganggap kecerunan sebagai pudar dari satu warna ke warna yang lain, tetapi helah untuk berjalur adalah dengan tidak memudar sama sekali. Sebagai gantinya, kita dapat menentukan "warna berhenti" di lokasi yang sama, sehingga warnanya berubah seketika dari satu (…)
Anda boleh membuat garis latar dalam CSS dengan menggunakan linear-gradient. Kita sering menganggap kecerunan sebagai pudar dari satu warna ke warna yang lain, tetapi helah untuk berjalur adalah dengan tidak memudar sama sekali. Sebagai gantinya, kita dapat menentukan "warna berhenti" di lokasi yang sama, sehingga warnanya berubah seketika dari satu ke yang berikutnya.
Kemudian helah untuk menjadikannya lebih mudah adalah menggunakan repeating-linear-gradientsehingga kita dapat menerangkan beberapa jalur pertama dan secara semula jadi akan berulang:
.element ( background: repeating-linear-gradient( 45deg, #606dbc, #606dbc 10px, #465298 10px, #465298 20px ); )
Untuk menganimasikan garis-garis dengan cara barberpole, adalah masalah menghidupkan background-position. Ini juga hanya tipu muslihat. Sekiranya ukuran elemen anda tidak sepadan dengan ukuran garis-garis berulang, memindahkan kedudukan latar belakang mungkin menghasilkan beberapa garis-garis canggung seperti ini:
Daripada mencocokkan ukuran ini dengan sempurna, lebih mudah meletupkan background-positionhingga 200% dan kemudian menghidupkan kedudukannya dengan 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%; ) )