Animierte Hintergrundstreifen, die sich auf Schweber wechseln

Wie verwendet ich CSS background-size Attribute, um coole Hintergrundstreifen zu erstellen? Dieser Artikel wird einen Fall teilen, der zeigt, wie visuelle Effekte von Hintergrundstreifen übergingen können, wenn sie mit CSS -Gradienten, Mischmodi und background-size Eigenschaften übergeben werden.

Normalerweise verwenden wir background-size: cover, um das Hintergrundbild das gesamte Element zu füllen. Dieser Fall erfordert jedoch eine fortgeschrittenere Hintergrundgrößenregelung: Hintergrundstreifen, die sich über den Übergang der Maus wagen. Der Effekt ist wie folgt (bitte schweben Sie Ihre Maus über den folgenden Bereich):

(Die Demonstration des dynamischen Effekts sollte hier eingefügt werden, was mit dem Originaltext übereinstimmt)

Der Schlüssel zum Erreichen dieses Effekts besteht darin, den Gradienten und die Mischmodi genial zu verwenden. Beginnen wir mit einer einfachen HTML -Struktur:

<div></div>

Erstes CSS -Stil:

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

Erstellen Sie Hintergrundstreifen

Wir können mit CSS linearer Gradient zum Erstellen von Streifen verwenden. Aufgrund der ungleichmäßigen Breite der Streifen und der Notwendigkeit von Übergangseffekten können wir keine Wiederholungsgradienten direkt verwenden. Hier simulieren wir fünf Streifen, indem wir fünf lineare Gradientenhintergründe überlagern und sie in die obere rechte Ecke des Behälters positionieren:

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;
}

Um den Code zu vereinfachen, können wir benutzerdefinierte Eigenschaften verwenden:

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 bedeutet Gradienten und steuert --n den vertikalen Versatz des Streifens. Derzeit ist der lineare Gradient auf reines Schwarz eingestellt, was für nachfolgende Maskierungs- und Mischeffekte dient. Um zu verhindern, dass der Hintergrund wiederholt Kacheln ist, müssen wir background-repeat: no-repeat;:

festlegen

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

Stellen Sie die Größe und den Abstand von Streifen ein

Die aktuellen Streifen überlappen sich und sind fast unmöglich zu sehen. Wir müssen das Attribut background-size verwenden, um die Breite und Höhe des Streifens festzulegen. Das background-size -Merkmal unterstützt die doppelte Wertsyntax und wir können die Breite bzw. die Höhe festlegen. Der folgende Code legt die Breite jedes Streifens unter Verwendung des Standardwerts der Höhe fest: auto

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

Da die Höhe

ist, bedecken sich die Streifen gegenseitig. Wir müssen die Doppelwertsyntax verwenden und die gleiche Höhe festlegen: auto

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

Um den Abstand zwischen Streifen hinzuzufügen, können wir die Höhe jedes Streifens leicht reduzieren:

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

Maske und Mischmodus

Ändern Sie die Hintergrundfarbe in weiß:

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;
  /* ... */
}

Um Maskierungs- und Mischeffekte zu erzielen, wickeln wir

in einen übergeordneten Container ein und fügen eine neue hinzu: <div> <code><div> Layout mit CSS -Gitter: <pre class="brush:php;toolbar:false"><section> &lt;div&gt;&lt;/div&gt; &lt;div&gt;&lt;/div&gt; </section></pre> <p> </p> Tradientenfarben auf die erste <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> anwenden und den vorherigen Streifenstil im zweiten <p> anwenden und mit <code><div>: <code><div> implementieren und Bildschirmmischmodus implementieren <code>mix-blend-mode: screen; Maus -Hover -Effekt

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

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

Schließlich fügen wir einen Mausover -Effekt hinzu, um die Streifenbreite auf die volle Breite des Behälters zu erweitern:

Der endgültige Effekt wird zu Beginn gezeigt. Bitte beachten Sie, dass für eine bessere Benutzererfahrung empfohlen wird, die Einstellungen für Sporteffekte zu reduzieren, um die Vorlieben verschiedener Benutzer zu erfüllen.

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

Diese Methode ist eine gute Wartbarkeit und Anpassung, und Sie können leicht die Höhe, Farbe und Ausrichtung der Streifen usw. ändern.

Ich hoffe, dieser Fall kann Ihnen helfen, die CSS -Attribute besser zu verstehen und anzuwenden. Wenn Sie andere Implementierungsmethoden haben, teilen Sie es bitte im Kommentarbereich weiter! background-size