Sie können Hintergrundstreifen in CSS mithilfe eines linearen Verlaufs erstellen. Wir denken oft an einen Farbverlauf als Überblendung von einer Farbe zur anderen, aber der Trick bei Streifen besteht darin, überhaupt keine Überblendung zu haben. Stattdessen können wir an derselben Stelle „Farbstopps“ festlegen, sodass sich die Farbe sofort von einem (…) ändert.
Mit können Sie Hintergrundstreifen in CSS erstellen linear-gradient. Wir denken oft an einen Farbverlauf als Überblendung von einer Farbe zur anderen, aber der Trick bei Streifen besteht darin, überhaupt keine Überblendung zu haben. Stattdessen können wir an derselben Stelle „Farbstopps“ festlegen, sodass sich die Farbe sofort von einer zur nächsten ändert.
Der Trick, um dies noch einfacher zu machen, ist die Verwendung, repeating-linear-gradientsodass wir nur die ersten Streifen beschreiben können und es sich natürlich wiederholen wird:
.element ( background: repeating-linear-gradient( 45deg, #606dbc, #606dbc 10px, #465298 10px, #465298 20px ); )
Um die Streifen auf Barberpole-Art zu animieren, müssen Sie die animieren background-position. Dies ist auch nur ein kniffliger Trick. Wenn die Größe Ihres Elements nicht mit der Größe der sich wiederholenden Streifen übereinstimmt, kann das Verschieben der Hintergrundposition zu einigen unangenehmen Streifen wie diesen führen:
Anstatt zu versuchen, diese Größen perfekt aufeinander abzustimmen, ist es einfacher, die background-positionauf 200% zu sprengen und dann ihre Position um 100% zu animieren.
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%; ) )