Erfahren Sie, wie Sie mit CSS3 Verlaufseffekte zu Bildern hinzufügen (detaillierte Code-Erklärung).

Im vorherigen Artikel „Lernen Sie Schritt für Schritt, wie Sie mit CSS3 Animationseffekte erzielen (Code-Sharing)“ habe ich Ihnen die Verwendung der CSS3-Animationseffekteinstellungen vorgestellt. Im folgenden Artikel erfahren Sie, wie Sie mit CSS3 Verlaufseffekte zu Bildern hinzufügen.

Ich bin vor langer Zeit zum ersten Mal mit dem CSS3-Gradienten in Kontakt gekommen. Ich finde, es ist wie das Spielen von PS und man kann viele wunderschöne Dinge machen.

Browser-Unterstützung

IE	FF	Chrome	Safari	Opera	iOS	Android	Android Chrome
6-9(nein)	2- 3,5( nein)	4-9(Teil-Webkit-)	3.1-3.2(Nein)	-	3.2-4.3(Teil)	2.1-3.0(-Webkit-)	10-25( -Webkit -)
10+	3.6-15(-webkit-)	10-25(-webkit-)	4-5(Teil)5-6.1(-webkit-)	-	5 +	4-4.3(-webkit-)	26+
-	15+	25+	5-6	15+	-	4.4+.	-

Linearer Farbverlauf, linearer Farbverlauf

Verwendung der Syntax

linear-gradient([ [ [| to [top | bottom] || [left | right] ],]?[,]+);

Die folgenden Codes können ausgeführt werden, und die Ausführungsergebnisse sind die gleichen

linear-gradient(#fff, #333);
linear-gradient(to bottom, #fff, #333);
linear-gradient(to top, #333, #fff);
linear-gradient(180deg, #fff, #333);
linear-gradient(to bottom, #fff 0%, #333 100%);

Sie können den Winkel, die Startrichtung, die Farbe und den Farbanteil definieren

Demo

<div style="width: 200px; height: 200px;"></div>
<style>
  div {
    background: linear-gradient(
      to right,
      red,
      orange,
      yellow,
      green,
      blue,
      indigo,
      violet
    );
  }
</style>

Linearen Farbverlauf füllen, wiederholender linearer Farbverlauf

Die Verwendung ist ähnlich wie bei linearem Farbverlauf, es handelt sich tatsächlich um eine Farbverlaufsfüllung. Es kann pixelgenau sein, wie zum Beispiel die Realisierung eines Zebramusters

<div class="g"></div>
<style>
  .g {
    background: repeating-linear-gradient(
      -45deg,
      transprent,
      transprent 25px,
      #fff 25px,
      #fff50px
    );
  }
</style>

radialer Farbverlauf

unter Verwendung der Syntax

radial-gradient( [ circle ||][ at]? , | [ ellipse || [|]{2}][ at]? , | [ [ circle | ellipse ] ||][ at]? , | at,[ ,]+ )

Die folgenden Codeausführungsergebnisse sind die gleichen

radial-gradient(circle, #f00, #ff0, #080);
radial-gradient(circle at center, #f00, #ff0, #080);
radial-gradient(circle at 50%, #f00, #ff0, #080);
radial-gradient(circle farthest-corner, #f00, #ff0, #080);

Sie können die Form schnell über finden length Position closest-side Die Kantenform des Farbverlaufs ist tangential zu der Seite des Behälters, die dem Mittelpunkt des Farbverlaufs am nächsten liegt (Kreis) oder zumindest tangential zu den vertikalen und horizontalen Seiten, die dem Mittelpunkt des Farbverlaufs am nächsten liegen (Ellipse).

closest-corner Die Kantenform des Farbverlaufs schneidet die Ecke des Containers, die dem Mittelpunkt des Farbverlaufs am nächsten liegt.

am weitesten entfernte Seite Das Gegenteil von „nächste Seite“: Die Kantenform verläuft tangential zu der Seite des Behälters, die am weitesten vom Mittelpunkt des Farbverlaufs entfernt ist (oder zu den am weitesten entfernten vertikalen und horizontalen Seiten).

am weitesten entfernte Ecke Die Kantenform des Farbverlaufs schneidet die Ecke des Containers, die am weitesten vom Mittelpunkt des Farbverlaufs entfernt ist.

Sie können die Position des Kreismittelpunkts schnell bestimmen, indem Sie beiKreis links oben Kreis links unten kreisen

• Kreis rechts unten Kreismitte in der Mitte | bei 50 % - radial-gradient

Dies ähnelt dem Repeating-linear-gradient, bei dem der Gradient ausgefüllt wird.

• code sample Eine Animation aus dem vorherigen Artikel bringt ihn dazu, sich zu bewegen.

Klicken Sie hier, um den Effekt zu sehen https://k-ui.cn Die Animation ist verzögert und es wird eine Weile dauern, bis sie angezeigt wird.

• Empfohlenes Lernen:

  CSS3-Video-Tutorial

Das obige ist der detaillierte Inhalt vonErfahren Sie, wie Sie mit CSS3 Verlaufseffekte zu Bildern hinzufügen (detaillierte Code-Erklärung).. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!