Drei Möglichkeiten, mit CSS und SVG zu blättern

Blobs - diese glatten, organischen Formen - verspotten eine spielerische Note im Webdesign, perfekt für Illustrationen und Hintergrundeffekte. Während die Illustrationssoftware eine Option ist, lassen Sie uns den Spaß beim Erstellen von Blobs mit CSS und SVG untersuchen.

Hier sind drei Ansätze:

1. SVG -Kreise und Ellipsen

Die einfachste Methode beinhaltet überlappende Kreise und Ellipsen in SVG. SVGs<circle></circle> Element ist einfach:

<circle cx="100" cy="100" fill="red" r="40"></circle>

• cx und cy : Definieren Sie die Zentralkoordinaten des Kreises.
• r : Gibt den Radius an.
• fill : Legt die Füllfarbe fest.

Mehrere überlappende Kreise erzeugen einen Basic -Blob:

<svg height="300" width="300">
  <circle cx="80" cy="80" fill="red" r="40"></circle>
  <circle cx="120" cy="80" fill="red" r="40"></circle>
  
</svg>

Für mehr Abwechslung verwenden Sie<ellipse></ellipse> Horizontale und vertikale Radien unabhängig voneinander zu kontrollieren:

<ellipse cx="200" cy="80" fill="red" rx="100" ry="50"></ellipse>

Obwohl diese Methode einfach das organische Gefühl von echten Blobs fehlt.

Alternativ kann CSS für grundlegende Kreise ausreichen:

 .Kreis {
  Grenzradius: 50%;
  Höhe: 50px;
  Breite: 50px;
}

2. SVG -Pfade für komplexe Formen

Für komplizierte Blobdesigns, SVGs<path></path> Element bietet ultimative Kontrolle. Es ermöglicht das Zeichnen von Zeilen und Kurven mit Befehlen wie:

• M : Bewegen Sie sich zu einem Punkt.
• L : Zeichne eine Linie.
• C : Zeichnen Sie eine kubische Bézier -Kurve.
• Z : Schließen Sie den Weg.

Eine detaillierte Erklärung dieser Befehle finden Sie in Chris Coyiers umfassender Leitfaden. Das manuelle Erstellen komplexer Pfade kann mühsam sein. Erwägen Sie daher, Tools zum Generieren der Pfaddaten zu verwenden. Zum Beispiel:

<path d="M10 10 C 20 20, 40 20, 50 10 Z" fill="red"></path>

Dieser Weg beginnt bei (10, 10), krümmt sich zu (50, 10) und schließt die Form.

3. CSS- und SVG -Filter für klebrige Effekte

Diese Technik nutzt SVG -Filter, um einen "klebrigen" Effekt aus sich überschneidenden Formen zu erzeugen. Wir werden zwei überlappende Rechtecke mit Transparenz verwenden und dann SVG -Filter für Unschärfe und Farbmanipulation auftragen.

SVG -Filter werden mit Verwendung definiert<filter></filter> und über CSS angewendet:

<svg style="position: absolute; width: 0; height: 0;">
  <filter id="goo">
    <fegaussianblur in="SourceGraphic" stddeviation="30"></fegaussianblur>
    <fecolormatrix in="blur" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 30 -7"></fecolormatrix>
  </filter>
</svg>

Der feGaussianBlur verwischt die Form, und feColorMatrix passt die Farbe an. Der Filter wird dann in CSS verwiesen:

 .blob-container {
  Filter: URL ("#Goo");
  / * ... andere Stile ... */
}

Dieser Ansatz bietet einen einzigartigen, leicht anpassbaren Gooey -Blob -Effekt. Experimentieren Sie mit verschiedenen Filterwerten, um das gewünschte Erscheinungsbild zu erzielen.

Denken Sie daran, die Werte und Parameter so einzustellen, dass die Form und das Aussehen Ihrer Blobs in jeder Methode fein abgestimmen.

Das obige ist der detaillierte Inhalt vonDrei Möglichkeiten, mit CSS und SVG zu blättern. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!