Accentsconagua
Share
CodePen wird schnell zum Anlaufpunkt, um zu zeigen, was wir mit unseren Web-Kreationen machen können. Hier sind einige der großartigen Dinge, die Leute in letzter Zeit mit CSS-Animationen erstellt haben!
Hinweis: Für noch mehr Inspiration, schau in meinen letzten Beitrag:
Apple-Uhr wie Mickey-Uhr von Jay Salvat (@jaysalvat).
Dies ist ein schönes Beispiel für die Kombination von CSS-Übergängen, SVG-Grafiken und JavaScript, um die Zeiger auf einem niedlichen Mickey Mouse-Zifferblatt zu positionieren.
U-Boot mit CSS von Alberto Jerez (@ajerez).
Die prächtige Verwendung des kreisförmigen Bullaug-Containers verleiht diesem CSS-animierten U-Boot viel Charme.
AT-AT von Tim Pietrusky (@TimPietrusky).
Star Wars inspirierte den AT-AT-Personenträger, der mit den Farben in CSS erstellt wurde. Ein funky Effekt.
Loader SVG / CSS von Bidji (@Bidji).
Dieser Lader verwendet die wechselnden Farben, um den Eindruck von Rotation zu vermitteln.
3D CSS Tardis von Gerwin van Royen (@Gerwinnz).
CSS kann verwendet werden, um erstaunliche 3D-Effekte zu erzeugen. Hier ist eine 3D-Tardis:
Dozing Bird von Peter Klein (@pmk).
Ein einfacher Kunststil und genau die richtige Menge an Animation geben diesem schläfrigen Vogel die Illusion des Lebens.
Reine CSS-Grenzanimation ohne SVG (@rplus).
Einfache und dennoch sehr effektive Verwendung von CSS-Rändern zum Erstellen einer Animation im Ladestil.
Star Wars: Die Macht erwacht in CSS von Donovan Hutchinson (@donovanh).
Der Titel aus dem kommenden Star Wars-Film wurde mit CSS, HTML und etwas JavaScript erstellt.
Pure CSS 3D Synthesizer (Mauszeiger für Rotation) von Nikolay Talanov (@suez).
Probieren Sie die Keys aus und drehen Sie diesen mit CSS erstellten 3D-Synth. Erstaunliche Arbeit:
Cascading Solar System! von Tady Walsh (@tadywankenobi).
Ein Modell unseres Sonnensystems, komplett mit skalierter Rotationsgeschwindigkeit, Monden und Details zu jedem der größeren Planeten. Die Sonne ist sogar eine Live-Aufnahme des Echten!
Vollständiges CSS 3D-Sonnensystem von Wayne Dunkley (@waynedunkley).
Ein anderes Sonnensystem, diesmal jedoch in 3D. Schöner Gebrauch der Schattierung.
Flache Design-Kamera mit CSS-Animation von Damien Pereira Morberto (@damienpm).
Drücken Sie den Auslöser dieser flachen Kamera, um ein Foto mit CSS-Animation zu erstellen.
Tag-Nacht-Simulation von Szymon Stypa (@Catagen).
Drücken Sie die Taste, um den Tag in Nacht umzuwandeln.
Animiertes Sprite mit CSS von Avaz Bokiev (@samarkandiy).
Eine Demonstration, wie eine Sequenz von Bildern (Sprite) zum Erstellen einer Stop-Motion-Animation mit Vorwärts- und Rückwärtsbewegung verwendet werden kann.
Dodekaeder von wontem (@wontem).
Ein subtiler, schöner Dodekaeder, der vollständig mit CSS erstellt und animiert wurde.
CSS-Animationen sind auch auf dem Envato-Markt eine wachsende Kategorie. Wenn Sie in Ihren Projekten Animationseffekte verwenden möchten, finden Sie alles von Schatten über Bild-Hover-Effekte, Leuchtkästen und mehr.
Beliebte CSS-Animationen auf dem Envato-MarktVor nicht allzu langer Zeit hätten wir uns für alle In-Browser-Animationen auf Flash- oder JavaScript-Tools gestützt. Moderne Browser haben bessere Unterstützung für CSS mit hardwarebeschleunigtem 3D und Animationen.
Dank Sites wie CodePen können wir leichter als je zuvor teilen und lernen. Was sind einige der inspirierendsten Animationsdemos, die Sie in letzter Zeit gesehen haben?
Wir haben ein umfassendes Handbuch erstellt, mit dessen Hilfe Sie CSS erlernen können, egal ob Sie gerade erst mit den Grundlagen beginnen oder etwas weiter fortgeschrittenes CSS erkunden möchten.
