Vous pouvez créer des bandes d'arrière-plan en CSS en utilisant un dégradé linéaire. Nous considérons souvent un dégradé comme un fondu d'une couleur à une autre, mais l'astuce des rayures est de ne pas avoir de fondu du tout. Au lieu de cela, nous pouvons spécifier des «arrêts de couleur» au même endroit, de sorte que la couleur change instantanément d'une (…)
Vous pouvez créer des bandes d'arrière-plan en CSS en utilisant linear-gradient. Nous considérons souvent un dégradé comme un fondu d'une couleur à une autre, mais l'astuce des rayures est de ne pas avoir de fondu du tout. Au lieu de cela, nous pouvons spécifier des «arrêts de couleur» au même endroit, de sorte que la couleur change instantanément de l'une à l'autre.
Ensuite, l'astuce pour rendre cela encore plus facile consiste à utiliser repeating-linear-gradientafin que nous puissions simplement décrire les premières bandes et cela se répétera naturellement:
.element ( background: repeating-linear-gradient( 45deg, #606dbc, #606dbc 10px, #465298 10px, #465298 20px ); )
Pour animer les rayures à la manière d'un barberpole, il s'agit d'animer le background-position. C'est aussi juste un peu délicat. Si la taille de votre élément ne correspond pas à la taille des bandes répétitives, le déplacement de la position de l'arrière-plan peut entraîner des bandes gênantes comme celles-ci:
Plutôt que d'essayer de faire correspondre parfaitement ces tailles, il est plus facile de faire sauter le background-positionà 200% puis d'animer sa position de 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%; ) )