Rayures de fond animées qui transmettent sur volant

Comment utiliser les attributs CSS background-size pour créer des rayures d'arrière-plan intéressantes? Cet article partagera un cas qui montre comment réaliser des effets visuels des transitions de bandes de fond lorsque vous souris avec des gradients CSS, des modes de mélange et des propriétés background-size.

Habituellement, nous utilisons background-size: cover pour faire remplir l'image d'arrière-plan tout l'élément. Mais ce cas nécessite un contrôle de taille d'arrière-plan plus avancé: les bandes d'arrière-plan qui font la transition lorsque la souris plane. L'effet est le suivant (veuillez planer votre souris dans la zone suivante):

(La démonstration d'effet dynamique doit être insérée ici, ce qui est cohérent avec le texte d'origine)

La clé pour atteindre cet effet est d'utiliser le gradient et les modes de mélange ingénieusement. Commençons par une simple structure HTML:

<div></div>

Style CSS initial:

div {
  width: 500px;
  height: 500px;
  background: palegreen;
}

Créer des rayures d'arrière-plan

Nous pouvons utiliser le gradient linéaire CSS pour créer des rayures. En raison de la largeur inégale des rayures et du besoin d'effets de transition, nous ne pouvons pas utiliser directement des gradients de répétition. Ici, nous simulons cinq rayures en superposant cinq arrière-plans de gradient linéaire et en les positionnant dans le coin supérieur droit du conteneur:

div {
  width: 500px;
  height: 500px;
  background: 
    linear-gradient(black, black) top right,
    linear-gradient(black, black) top 100px right,
    linear-gradient(black, black) top 200px right,
    linear-gradient(black, black) top 300px right,
    linear-gradient(black, black) top 400px right, 
    palegreen;
}

Pour simplifier le code, nous pouvons utiliser des propriétés personnalisées:

div {
  --gt: linear-gradient(black, black);
  --n: 100px;

  width: 500px;
  height: 500px;
  background: 
    var(--gt) top right,
    var(--gt) top var(--n) right,
    var(--gt) top calc(var(--n) * 2) right,
    var(--gt) top calc(var(--n) * 3) right,
    var(--gt) top calc(var(--n) * 4) right, 
    palegreen;
}

--gt signifie gradient et --n contrôle le décalage vertical de la bande. Actuellement, le gradient linéaire est défini sur le noir pur, qui est pour les effets de masquage et de mélange ultérieurs. Pour empêcher l'arrière-plan de carreler à plusieurs reprises, nous devons définir background-repeat: no-repeat;:

div {
  /* ... */
  background-repeat: no-repeat;
}

ajuster la taille et l'espacement des rayures

Les rayures actuelles se chevauchent et sont presque impossibles à voir. Nous devons utiliser l'attribut background-size pour définir la largeur et la hauteur de la bande. L'attribut background-size prend en charge la syntaxe à double valeur, et nous pouvons définir respectivement la largeur et la hauteur. Le code suivant définit la largeur de chaque bande, en utilisant la valeur par défaut de la hauteur: auto

div {
  /* ... */
  background-size: 60%, 90%, 70%, 40%, 10%;
}

Étant donné que la hauteur est

, les rayures se couvriront mutuellement. Nous devons utiliser la syntaxe à double valeur et définir la même hauteur: auto

div {
  /* ... */
  background-size: 60% var(--n), 90% var(--n), 70% var(--n), 40% var(--n), 10% var(--n);
}

Pour ajouter l'espacement entre les rayures, nous pouvons légèrement réduire la hauteur de chaque bande:

div {
  --h: calc(var(--n) - 5px);
  /* ... */
  background-size: 60% var(--h), 90% var(--h), 70% var(--h), 40% var(--h), 10% var(--h);
}

Masque et mode de mélange

Changer la couleur du fond en blanc:

div {
  /* ... */
  background: 
    var(--gt) top right,
    var(--gt) top var(--n) right,
    var(--gt) top calc(var(--n) * 2) right,
    var(--gt) top calc(var(--n) * 3) right,
    var(--gt) top calc(var(--n) * 4) right, 
    #fff;
  /* ... */
}

Pour obtenir des effets de masquage et de mélange, nous enroulons

dans un conteneur parent et en en avons ajouté un nouveau: <div> <code><div> Disposition avec la grille CSS: <pre class="brush:php;toolbar:false"><section> &lt;div&gt;&lt;/div&gt; &lt;div&gt;&lt;/div&gt; </section></pre> <p> </p> Appliquer les couleurs de gradient sur le premier <pre class="brush:php;toolbar:false">section { display: grid; align-items: center; justify-items: center; width: 500px; height: 500px; } section &gt; div { width: inherit; height: inherit; grid-area: 1 / 1; }</pre>, et appliquez le style de bande précédent sur le second <p> et implémentez le mode de mélange d'écran en utilisant <code><div>: <code><div> <code>mix-blend-mode: screen; Effet de survol de la souris

div:nth-child(1) { 
  background: linear-gradient(to right, red, orange); 
}

div:nth-child(2)  {
  /* ... previous styles ... */
  mix-blend-mode: screen;
}

Enfin, nous ajoutons un effet de souris pour étendre la largeur de la bande à toute la largeur du conteneur:

L'effet final est indiqué au début. Veuillez noter que pour une meilleure expérience utilisateur, il est recommandé d'envisager de réduire les paramètres des effets sportifs pour répondre aux préférences des différents utilisateurs.

section:hover > div:nth-child(2){
  background-size: 100% var(--h);
  transition: background-size 1s;
}

Cette méthode est une bonne maintenabilité et personnalisation, et vous pouvez facilement modifier la hauteur, la couleur et l'orientation des rayures, etc.

J'espère que cette affaire peut vous aider à mieux comprendre et appliquer les attributs CSS. Si vous avez d'autres méthodes de mise en œuvre, veuillez la partager dans la section des commentaires! background-size