Doğrusal gradyan kullanarak CSS'de arka plan şeritleri oluşturabilirsiniz. Genellikle bir gradyanı bir renkten diğerine solma olarak düşünürüz, ancak çizgilerin püf noktası hiç solma olmamasıdır. Bunun yerine, aynı konumdaki "renk duraklarını" belirleyebiliriz, böylece renk bir (…)
Kullanarak CSS'de arka plan şeritleri oluşturabilirsiniz linear-gradient. Genellikle bir gradyanı bir renkten diğerine solma olarak düşünürüz, ancak çizgilerin püf noktası hiç solma olmamasıdır. Bunun yerine, aynı yerde "renk durakları" belirleyebiliriz, böylece renk anında birinden diğerine değişir.
O zaman bunu daha da kolaylaştırmanın püf noktası kullanmaktır, repeating-linear-gradientböylece ilk birkaç çizgiyi tanımlayabiliriz ve doğal olarak tekrar eder:
.element ( background: repeating-linear-gradient( 45deg, #606dbc, #606dbc 10px, #465298 10px, #465298 20px ); )
Çizgileri berber direği tarzında canlandırmak için, bu bir background-position. Bu aynı zamanda biraz zor. Öğenizin boyutu yinelenen şeritlerin boyutuyla eşleşmiyorsa, arka plan konumunu taşımak aşağıdakiler gibi bazı garip şeritlere neden olabilir:
Bu boyutları mükemmel bir şekilde eşleştirmeye çalışmaktansa, background-position% 200'ü şişirmek ve ardından konumunu% 100 canlandırmak daha kolaydır .
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%; ) )