Animierte CSS-Kunst erstellen

Feb 2, 2026

wie man

(Bildkredite: Tiffany Choong)

Die Erstellung von CSS-Images ist eine lustige Möglichkeit, Ihre Fähigkeiten zu üben, und erstellen Sie ein ordentliches Stück Kunstwerk. Es ist eine schöne Pause vom üblichen täglichen Stil von Webkomponenten. Alles, was Sie tun müssen, ist ein leeres Dokument und eine CSS-Datei. Wir empfehlen die Verwendung von SASS, mit dem Sie Ihre Stile wiederverwenden und einfachere Selectors schreiben können (siehe unseren Anleitung zu Was ist sass? um mehr über diesen Präprozessor zu erfahren).

Wir beginnen mit einigen Top-Tipps, um CSS-Kunst zu beherrschen, und zeigen Sie dann, wie Sie diesen animierten Ballon Pikachu nur mit CSS neu erstellen können (Stellen Sie sicher, dass Sie Ihre Dateien in der Ankunft sicher halten Cloud-Speicherung. ).

Erkunden Sie für mehr Inspiration unsere Rundung von Erstaunen CSS-Animationsbeispiele. . Nach etwas mehr Basic? Beginnen Sie mit dem Lernen So erstellen Sie ein Eislolly mit CSS .

Oder, wenn Sie einen neuen Standort starten, graben Sie die Komplexität mit einem brillanten Webseitenersteller und stellen Sie sicher, dass Sie Ihre bekommen Web-Hosting Platz auf.

Reduzieren Sie das Design auf einfache Formen

Bei der Erstellung von CSS-Kunst kann es helfen, ein paar Referenzbilder für Inspiration anzusehen, und erstellen dann eine vereinfachte Cartoon-Variante, wenn Sie mithilfe des Subjekts mit primitiven Formen vorsehen, was besser ist CSS-Formen. .

Verwenden Sie einen hellen Hintergrund, um mit der Positionierung zu helfen

Bei der Überlappung von Formen ähnlicher Farben ist es schwierig zu sehen, wo sie platziert werden oder wie sie aussehen. Es ist nützlich, die Form zu haben, an denen Sie arbeiten, indem Sie die Hintergrundfarbe zu etwas hellem und fröhlichem, wie Magenta. Auf diese Weise können Sie die genaue Position und Form Ihres Elements leicht sehen.

Verwenden Sie Flüssigkeitsgrößen

Wenn es darum geht, einen PX-Wert für Eigenschaften zu definieren, empfehlen wir die Verwendung des REM-Geräts. Wenn Sie sich entscheiden, dass Ihr allgemeines Stück größer oder kleiner ist, mithilfe von REM-Einheiten, die Sie nur die Basis ändern müssen HTML {Schriftgröße: ... px} in Ihrem SASS, um das gesamte Grafik auf oder ab zu skalieren.

Bei der Definition der Höhen und Breiten von untergeordneten Elementen, die ein relatives Dimensionieren des Elternteils haben sollten, kommen prozentuale Prozentsätze in praktisch. Da diese Werte immer relativ zu ihrem Elternteil sind, sollten sie auch mit dem skalieren HTML-Schriftgröße .

Generate CSS — Generieren von CSS ist eine maßgeschneiderte Konferenz von Creative Bloq, Net und Web Designer. Klicken Sie hier, um Ihr Frühbuchsticket zu buchen! (Bildkredite: Getty / Zukunft)

01. Beginnen Sie mit Containern

Ein Wrapper-Container, um das Grafikstücken zu halten, ist ein guter Startort. Innerhalb des Containers können wir drei innere Behälter platzieren - den Kopf, den Körper und die Luftballons.

 & lt; Div Class = "Container" & GT;
& lt; div class = "head" & gt; & lt; / div & gt;
& lt; div class = "körper" & gt; & lt; / div & gt;
& lt; div class = "Ballons" & gt; & lt; / div & gt;
& lt; / div & gt;

Der Behälter sollte normalerweise sein Position: relativ um zu ermöglichen, dass andere Elemente relativ darin platziert werden Position: absolut und haben eine genau definierte Höhe und Breite, ansonsten werden die Positionierung von Kinderelementen schwierig.

Fügen Sie in Ihren Stilen Ihre Basisfarben als Sass-Variablen zur Wiederverwendbarkeit hinzu. Das Sass erleichtern() und verdunkeln() Funktionen erstellen Tönungen und Farbenschirme, die als Highlights oder Schatten für Ihren Charakter verwendet werden können.

02. Stil der Kopf

Wenn die Struktur herausgefunden wurde, lass uns den Kopf zuerst aufweisen. In diesem Fall macht der Kopf einen schönen Mittelpunkt für das Grafik, sondern, anstatt seine Position absolut einzustellen, kann er relativ eingestellt werden. Dadurch kann der Behälter ein stabiles Element darin aufweisen, wobei den anderen schwimmenden absoluten Elementen einen Ankerpunkt und damit mehr Kontrolle über ihre Position verleiht.

Die Gesichtszüge benötigen einen Container zum Positionieren, also erstellen Sie a & lt; div & gt; Innerhalb des Kopfbehälters für die gelbe Form mit einer Breite, Höhe und Hintergrundfarbe - jetzt lassen wir dieses Rechteck mehr wie eine Kopfform aussehen. Eine der häufigsten und nützlichen Eigenschaften in CSS-Kunst ist das Randradius Eigenschaft, die die Kurve des X- oder Y-Ecken der Box ändert und verwendet werden kann, um mehr organische Formen zu erstellen.

Mit dieser Technik mit einem REM- und prozentualen Kombination können Sie blobähnliche Formen erstellen, anstatt einfach nur Ellipsen, die natürlich mit dem skaliert werden html. {Schriftgröße: ... px} :

 .FACE {
Border-Top-Link-Radius: 50% 4.5REM;
Border-Top-Rights-Radius: 50% 4.5REM;
Border-Bottom-Links-Radius: 50% 3REM;
Border-Bottom-Right-Radius: 50% 3REM;
...
}

Nach der Erfüllung des Kopfes Randradius Positionieren Sie den Rest der Gesichtszüge als untergeordnete Elemente des Kopfes, wie Augen, Wangen, Nase und Ohren. Wie der Kopf, das Randradius Trick wird seitdem in praktisch kommen Borderradius: 50% kann nicht ansprechend aussehen.

03. Bewegen Sie sich an den Körper

Ein Körper & lt; div & gt; kann in den Körperbehälter hinter dem Kopf platziert werden und mit dem gleichen geformt werden Randradius Technik sowie die Arme, Beine und Schwanz. Um eine ordnungsgemäße Überlappung zu ermöglichen, sollte der eigentliche Körper sein eigenes Element sein, da bestimmte innere Elemente wie die hinteren Streifen mit abgeschnitten werden müssen Überlauf versteckt . Um den Körper mehr Tiefe zu geben, der Transformation: Skew () Eigentum kann den Körper leicht scheren.

Der Blitzschwanz kann mit drei separaten Rechtecken erstellt werden, anstatt zu versuchen, diese Form von einem Element zu bilden. Die Rechtecke können gedreht und über den oberen voneinander positioniert werden, um einen Bolzen zu bilden. Die Arme und Beine können die dunklere Primärfarbe verwenden, die wir mit Sass erstellt haben verdunkeln() So fallen sie aus.

04. Ballons hinzufügen.

Nun, da die elektrische Maus abgeschlossen ist, lasst uns Ballons auf den Rücken binden. Einige hinzufügen & lt; div & gt; s mit gemeinsam genutzten Stilen mit einer Kinderkette & lt; div & gt; und positionieren Sie sie über dem Kopf. Die Zeichenfolge ist unsichtbar, außer a Border-Links , welche helfen, dass es weder sahenähnlich aussieht.

Um die Schnur um die Taille des Charakters zu binden, a & lt; div & gt; kann in den Körper platziert werden, um eine ordnungsgemäße Positionierung zu ermöglichen. Die Zeichenfolge benötigt eine leichte Kurve, um zu erscheinen, als ob es um den Körper gebunden ist, so dass es eine kleine Höhe haben kann, Borderboden und ein Borderboden Linker und rechter Radius, der eine dünne gekrümmte Linie macht:

 .String {
Höhe: 1REM;
Breite: 9rem;
Grenzrecht: Feste 1px $ weiß;
Border-Links: Feste 1Px $ weiß;
Grenzboden: Feste 1px $ weiß;
Border-Bottom-links-Radius: 50% 1REM;
Border-Bottom-Right-Radius: 50% 1REM;
}

05. Animieren Sie die CSS

Wir können das Charakterleben durch Hinzufügen bringen @Keyframes. Animationen. Die Arme, Beine, Ohren und Schwanz können mit animiert werden Transformation: Drehen () . Sicherstellen, dass die Transform-Ursprung ist auf das "Gelenk" (d. H. TOP CENTER für ein Bein) eingestellt und die Drehung anpassen. Dieser Animationstyp kann mehrmals in einem SASS-Mixin verwendet werden:

 @mixin animaterotate ($ name, $ start, $ ende) {
@keyframes # {$ name} {
0%, 100% {transform: rotieren (# {$ starten} deg)}
50% {Transformation: Drehen (# {$ ende} deg)}
}
}

Zum Schluss ein langsamer 5er hinzugefügt transform: translatey () Die Keyframe-Animation belebt die Figur auf und ab, als ob sie schwebt. Für einen Hauch von Realismus, eine blinkende Animation mit Transformation: Skalieren (0,1) Eigenschaft kann verwendet werden, um es zu erscheinen, als ob die Augen schließen.

Dieser Artikel wurde ursprünglich im Creative Web Design Magazine veröffentlicht Netz . Ausgabe 283 kaufen oder abonnieren .

Weiterlesen:

5 Dinge, die Sie nie über CSS wussten
Fügen Sie SVG-Filter mit CSS hinzu
So codieren Sie Smart Text-Effekte mit CSS

Animierte CSS-Kunst erstellen

01. Beginnen Sie mit Containern

02. Stil der Kopf

03. Bewegen Sie sich an den Körper

04. Ballons hinzufügen.

05. Animieren Sie die CSS

wie man - Die beliebtesten Artikel

Beginnen Sie mit dem Flammenmaler

der wesentliche Leitfaden zur Verkürzung in der Kunst

14 Zbrush-Workflow-Tipps

Wie man einen bunten Zombie malt

Wie zeichnet man eine große Katze mit Pastellen

Lernen Sie Laub mit X-Particles

Schärfen Sie Ihre Stillleben-Malerei-Fähigkeiten

So erstellen Sie ein stilisiertes 3D-Zeichen für Spiele

Kategorien