So erstellen Sie Wellenformen und Muster in CSS

Wellenformen in CSS erstellen kann eine Herausforderung sein. Wir versuchen oft, Welleneffekte mithilfe von border-radius -attributen und einer großen Anzahl von Näherungen zu simulieren, dies kann jedoch beim Umgang mit Wellenmustern komplexer werden.

Während SVG eine effizientere Möglichkeit ist, Wellenformen zu erstellen, kann CSS auch gute Ergebnisse erzielen und der Code muss nicht zu kompliziert sein. Noch besser, ich gebe einen Online -Generator zur Vereinfachung des Prozesses!

Verwenden des Generators können Sie sehen, dass der generierte CSS -Code nur zwei Gradienten und eine CSS mask -Sache enthält - das ist alles, und Sie können verschiedene Wellenformen und Muster erstellen. Darüber hinaus können wir die Größe und Krümmung der Welle leicht steuern.

Einige Werte mögen wie "magische Zahlen" aussehen, aber es steckt tatsächlich eine logische Grundlage. Wir werden den Code analysieren und alle Geheimnisse des Erstellens von Wellen aufdecken.

Dieser Artikel ist eine Nachfolger eines früheren Artikels über die Erstellung verschiedener Zickzack-, Bereichsbegrenzungs-, überbrochener und welliger Grenzen. Ich empfehle dringend, diesen Artikel zu lesen, da er dieselbe hier beschriebene Technik verwendet, jedoch ausführlicher.

Das mathematische Prinzip hinter Wellen

streng genommen gibt es keine magische Formel, um Wellenformen zu erzeugen. Jede Form mit einer oberen und unteren Kurve kann als Welle bezeichnet werden, sodass wir uns nicht auf komplexe mathematische Berechnungen beschränken. Stattdessen werden wir geometrische Basis verwenden, um die Wellen zu reproduzieren.

Beginnen wir mit einem einfachen Beispiel mit zwei kreisförmigen Formen:

Wir haben zwei Kreise mit demselben Radius nebeneinander. Hast du diese rote Linie gesehen? Es deckt die obere Hälfte der ersten Runde und die untere Hälfte der zweiten Runde ab. Stellen Sie sich jetzt vor, Sie nehmen diese Linie und wiederholen sie.

Wir haben die Wellen gesehen. Füllen wir nun den unteren (oder oberen) Abschnitt aus, um die folgenden Ergebnisse zu erhalten:

schau! Wir erhalten eine Wellenform und können eine Variable verwenden, um den Radius des Kreises zu steuern. Dies ist eine der einfachsten Wellen, die wir erstellen können, und die, die ich in meinem vorherigen Beitrag gezeigt habe.

Lassen Sie uns eine gewisse Komplexität hinzufügen, indem Sie die erste Legende einnehmen und den Kreis ein wenig bewegt:

Wir haben immer noch zwei Kreise mit dem gleichen Radius, aber sie sind nicht mehr horizontal ausgerichtet. In diesem Fall deckt die rote Linie nicht mehr die Hälfte der Fläche jedes Kreises, sondern eine kleinere Fläche mehr ab. Dieser Bereich ist durch die gepunktete rote Linie begrenzt. Die Linie fließt durch den Punkt, an dem sich zwei Kreise treffen.

Nehmen Sie jetzt diese Zeile und wiederholen Sie sie und Sie erhalten eine weitere Welle, eine glattere.

Ich denke du verstehst. Durch die Kontrolle der Position und Größe des Kreises können wir jede gewünschte Welle erstellen. Wir können sogar Variablen für sie erstellen, die ich P und S nennen werde.

Sie haben möglicherweise festgestellt, dass wir im Online -Generator zwei Eingänge verwenden, um die Wellen zu steuern. Sie werden den oben genannten Variablen zugeordnet. S ist die "Größe der Welle" und P ist die "Krümmung der Welle".

i definiere p als p = m*s, wobei m die Variable ist, die Sie bei der Aktualisierung der Krümmung der Welle anpassen. Dies ermöglicht es uns, immer die gleiche Krümmung beizubehalten, auch wenn wir S. aktualisieren.

m kann ein beliebiger Wert zwischen 0 und 2 sein. 0 gibt unseren ersten Sonderfall, in dem zwei Kreise horizontal ausgerichtet sind. 2 ist ein maximaler Wert. Wir können größer sein, aber nach einigen Tests stellte ich fest, dass jeder Wert von mehr als 2 eine schlechte flache Form erzeugt.

Vergessen wir nicht den Radius unserer kreisförmigen Form! Dies kann auch mit S und P definiert werden, wie unten gezeigt:

<code>R = sqrt(P² + S²)/2
R = sqrt(m²*S² + S²)/2
R = S*sqrt(m² + 1)/2</code>

Wenn m gleich 0 ist (d. H. P ist gleich 0), haben wir r = s/2.

Wir haben alles, was wir brauchen, um all dies in CSS in Gradienten umzuwandeln!

Gradient erstellen

Unsere Wellen verwenden Kreise, und wenn es um Kreise geht, sprechen wir über Radialgradienten. Da die beiden Kreise unsere Wellen definieren, werden wir logisch zwei radiale Gradienten verwenden.

Wir werden mit einem Sonderfall beginnen, in dem P gleich 0 ist. Dies ist die erste Gradientenillustration:

Dieser Gradient erzeugt die erste Krümmung, während er den gesamten Bodenbereich füllt - wohl das "Wasser" der Wellen.

<code>.wave {
  --size: 50px;

  mask: radial-gradient(var(--size) at 50% 0%, #0000 99%, red 101%) 
    50% var(--size)/calc(4 * var(--size)) 100% repeat-x;
}</code>

--size Variablen definieren den Radius und die Größe des radialen Gradienten. Wenn wir es mit der S -Variablen vergleichen, ist es gleich S/2.

Fügen wir jetzt den zweiten Gradienten hinzu:

Der zweite Gradient ist nur ein Kreis, um unsere Wellen zu vervollständigen:

<code>radial-gradient(var(--size) at 50% var(--size), blue 99%, #0000 101%) 
  calc(50% - 2*var(--size)) 0/calc(4 * var(--size)) 100%</code>

Wenn Sie sich den vorherigen Beitrag ansehen, werden Sie feststellen, dass ich nur wiederhole, was ich dort getan habe.

Ich habe zwei Artikel gelesen, aber die Gradientenkonfiguration ist nicht gleich.

Dies liegt daran, dass wir verschiedene Gradientenkonfigurationen verwenden können, um dasselbe Ergebnis zu erzielen. Wenn Sie die beiden Konfigurationen vergleichen, werden Sie eine etwas andere Ausrichtung feststellen, aber der Trick ist der gleiche. Wenn Sie mit Gradienten nicht vertraut sind, kann dies verwirrend sein, aber keine Sorge. Mit einigen Übungen werden Sie sich an sie gewöhnen und feststellen, dass verschiedene Syntaxe die gleichen Ergebnisse erzielen können.

Dies ist der vollständige Code für unsere erste Welle:

<code>.wave {
  --size: 50px;

  mask:
    radial-gradient(var(--size) at 50% var(--size),#000 99%, #0000 101%) 
      calc(50% - 2*var(--size)) 0/calc(4 * var(--size)) 100%,
    radial-gradient(var(--size) at 50% 0px, #0000 99%, #000 101%) 
      50% var(--size)/calc(4 * var(--size)) 100% repeat-x;
}</code>

Nehmen wir diesen Code nun und passen Sie ihn an, damit wir eine Variable einführen, die vollständig verwendet werden kann, um jede gewünschte Welle zu erstellen. Wie wir im vorherigen Abschnitt gesehen haben, besteht der Haupttrick darin, die Kreise so zu bewegen, dass sie nicht mehr ausgerichtet sind. Aktualisieren wir also die Position jedes Kreises. Wir bewegen den ersten und den zweiten nach oben.

Unser Code sieht so aus:

<code>.wave {
  --size: 50px;
  --p: 25px;

  mask:
    radial-gradient(var(--size) at 50% calc(var(--size) + var(--p)), #000 99%, #0000 101%) 
      calc(50% - 2*var(--size)) 0/calc(4 * var(--size)) 100%,
    radial-gradient(var(--size) at 50% calc(-1*var(--p)), #0000 99%, #000 101%) 
      50% var(--size) / calc(4 * var(--size)) 100% repeat-x;
}</code>

Ich habe eine neue --p -Variable eingeführt, um die mittlere Position jedes Kreises zu definieren. Der erste Gradient verwendet 50% calc(-1*var(--p)), sodass seine Mitte nach oben bewegt, während der zweite Gradient calc(var(--size) var(--p)) verwendet, um ihn nach unten zu bewegen.

Die Demonstration ist besser als tausend Wörter:

Die Kreise sind weder ausgerichtet noch berühren sich einander. Wir haben sie weit getrennt, ohne den Radius zu ändern, also haben wir die Wellen verloren. Wir können diese Probleme jedoch beheben, indem wir den neuen Radius unter Verwendung der zuvor verwendeten mathematischen Methode berechnen. Denken Sie an r = sqrt (p² s²)/2. In unserem Fall ist --size gleich S/2; Daher ist der Abstand zwischen ihren Mittelpunkten doppelt so hoch wie --p: --p

<code>R = sqrt(P² + S²)/2
R = sqrt(m²*S² + S²)/2
R = S*sqrt(m² + 1)/2</code>

Dies gibt uns ein Ergebnis von 55,9px.

Unsere Wellen sind zurück! Fügen wir die Gleichung in unser CSS ein:

<code>.wave {
  --size: 50px;

  mask: radial-gradient(var(--size) at 50% 0%, #0000 99%, red 101%) 
    50% var(--size)/calc(4 * var(--size)) 100% repeat-x;
}</code>

Das obige CSS sieht gültig aus, aber es funktioniert nicht, da wir zwei Längen nicht multiplizieren können. Daher müssen wir eine M -Variable einführen, um die Krümmung zu steuern, wie im vorherigen Abschnitt beschrieben.

<code>radial-gradient(var(--size) at 50% var(--size), blue 99%, #0000 101%) 
  calc(50% - 2*var(--size)) 0/calc(4 * var(--size)) 100%</code>

Dies ist sehr cool: Nur zwei Gradienten werden benötigt, um eine coole Welle zu erhalten, die Sie mit dem Attribut

auf jedes Element anwenden können. Sie müssen es nicht versuchen - Sie müssen nur zwei Variablen aktualisieren! mask

Reverse Wave

Was ist, wenn wir wollen, dass sich die Wellen in die andere Richtung bewegen, wir füllen den "Himmel" anstelle des "Wassers"? Ob Sie es glauben oder nicht, wir müssen nur zwei Werte aktualisieren:

<code>.wave {
  --size: 50px;

  mask:
    radial-gradient(var(--size) at 50% var(--size),#000 99%, #0000 101%) 
      calc(50% - 2*var(--size)) 0/calc(4 * var(--size)) 100%,
    radial-gradient(var(--size) at 50% 0px, #0000 99%, #000 101%) 
      50% var(--size)/calc(4 * var(--size)) 100% repeat-x;
}</code>

Ich habe nur einen Versatz von 100%hinzugefügt, wie oben gezeigt. Die Ergebnisse sind wie folgt:

könnten wir in Betracht ziehen, eine mehr-freundlichere Keyword-syntax zu verwenden, um es einfacher zu machen:

<code>.wave {
  --size: 50px;
  --p: 25px;

  mask:
    radial-gradient(var(--size) at 50% calc(var(--size) + var(--p)), #000 99%, #0000 101%) 
      calc(50% - 2*var(--size)) 0/calc(4 * var(--size)) 100%,
    radial-gradient(var(--size) at 50% calc(-1*var(--p)), #0000 99%, #000 101%) 
      50% var(--size) / calc(4 * var(--size)) 100% repeat-x;
}</code>

Wir verwenden die Schlüsselwörter

und left, um Kanten und Offsets anzugeben. Standardmäßig sind Browser standardmäßig bottom und left - weshalb wir 100% verwenden, um Elemente nach unten zu bewegen. Wir haben es tatsächlich zu 100% von oben bewegt, also ist es tatsächlich dasselbe wie der Boden. Einfacher zu lesen als Mathematik! top

Verwenden dieser aktualisierten Syntax ersetzen wir einfach

durch bottom - und umgekehrt -, um die Richtung der Welle zu ändern. top

Wenn Sie sowohl die oberen als auch die unteren Wellen bekommen möchten, kombinieren wir alle Gradienten in einer Anweisung:

<code>R = sqrt(var(--size) * var(--size) + var(--p) * var(--p))</code>

Wenn Sie den Code überprüfen, werden Sie feststellen, dass ich nicht nur alle Gradienten kombiniert habe, sondern auch die Höhe von 100% auf 51% reduziert habe, damit sie alle die Hälfte des Elements abdecken. Ja, 51%. Wir brauchen einen zusätzlichen Prozentsatz, um kleine Überlappungen durchzuführen, um Lücken zu vermeiden.

Was ist mit der linken und rechten Seite?

Dies ist Ihre Hausaufgaben! Nutzen Sie das, was wir oben und unten getan haben, und versuchen Sie, die Werte zu aktualisieren, um die Werte rechts und links zu erhalten. Keine Sorge, es ist einfach, das einzige, was Sie tun müssen, ist die Werte auszutauschen.

Wenn Sie Probleme haben, können Sie immer den Online -Generator verwenden, um den Code zu überprüfen und die Ergebnisse zu visualisieren.

... (Der verbleibende Inhalt ähnelt dem Originaltext, außer dass die Sprache und der Ausdruck angepasst werden und die Bilder und Codeblöcke beibehalten werden)

Das obige ist der detaillierte Inhalt vonSo erstellen Sie Wellenformen und Muster in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!