() translation by (you can also view the original English article)
CodePen entwickelt sich schnell zum Ort, um zu zeigen, was wir mit unseren Web-Kreationen machen können. Hier ist eine Liste der großartigen Sachen, die Leute in letzter Zeit mit CSS Animationen erstellt haben!
1. JavaScript Mickey Uhr
Apple Uhr wie Mickey Uhr von Jay Salvat (@jaysalvat).
Das ist ein schönes Beispiel für die Kombination von CSS-Übergängen, SVG-Grafiken und JavaScript, um die Hände auf einem niedlichen Mickey-Mouse-Zifferblatt zu positionieren.
2. CSS-U-Boot
U-Boot mit CSS von Alberto Jerez (@ajerez).
Die Verwendung des runden Portlochcontainers verleiht diesem CSS-animierten U-Boot viel Charme.
3. ASCII AT-AT
AT-AT von Tim Pietrusky (@TimPietrusky).
Star Wars inspirierte AT-AT-Personalträger, gezeichnet mit Text mit den Farben, die in CSS durchlaufen wurden. Ein funky Effekt.
4. SVG/CSS-Lader
Lader SVG/CSS von Bidji (@Bidji).
Dieser Lader verwendet die wechselnden Farben, um den Eindruck von Rotation zu erwecken.
5. 3D CSS Tardis
3D CSS Tardis von Gerwin van Royen (@Gerwinnz).
CSS kann verwendet werden, um einige erstaunliche 3D-Effekte zu erstellen. Hier ist eine 3D-Tardis:
6. Dösender Vogel
Dösender Vogel von Peter Klein (@pmk).
Schlichter Kunststil und genau die richtige Menge an Animation verleihen diesem schläfrigen Vogel die Illusion des Lebens.
7. Reine CSS-Randanimation
Reine CSS-Randanimation ohne SVG von Rplus (@rplus).
Einfache, aber sehr effektive Verwendung von CSS-Rahmen, um eine animierte Animation zu erstellen.
8. Star Wars: Die Macht erwacht
Star Wars: Die Macht erwacht in CSS von Donovan Hutchinson (@donovanh).
Der Titel aus dem kommenden Star Wars-Film wurde mit CSS, HTML und ein wenig JavaScript erstellt.
9. 3D-Synth
Pure CSS 3D Synthesizer (Mausklick für Rotation) von Nikolay Talanov (@suez).
Probieren Sie die Tasten aus und drehen Sie diesen 3D-Synthesizer, der mit CSS erstellt wurde. Erstaunliche Arbeit:
10. Cascading Sonnensystem
Kaskadierendes Sonnensystem! von Tady Walsh (@tadywankenobi).
Ein Modell unseres Sonnensystems, komplett mit skalierter Rotationsgeschwindigkeit, Monden und Details auf jedem der größeren Planeten. Die Sonne ist sogar eine Live-Aufnahme des echten Dinges!
11. 3D-Sonnensystem
Volles CSS 3D Sonnensystem von Wayne Dunkley (@waynedunkley).
Ein anderes Sonnensystem, aber diesmal in 3D. Schöne Verwendung von Schattierungen.
12. Flache Designkamera
Flache Designkamera 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.
13. Tag und Nacht Übergang
Tag Nacht Simulation von Szymon Stypa (@Catagen).
Drücken Sie die Taste, um den Tag in die Nacht umwandeln zu sehen.
14. Animierter Sprite mit CSS
Animieren Sie Sprite mit CSS von Avaz Bokiev (@samarkandiy).
Eine Demonstration, wie eine Sequenz von Bildern (Sprite) verwendet werden kann, um eine Stop-Motion-Animation mit Vorwärts- und Rückwärtsbewegung zu erstellen.
15. Dodekaeder
Dodekaeder von wontem (@wontem).
Ein subtiles, wunderschönes Dodekaeder, das komplett mit CSS erstellt und animiert wurde.
Schlussfolgerung
Vor kurzem, hätten wir uns auf Flash- oder JavaScript-Werkzeuge für jede In-Browser-Animation gestützt. Moderne Browser haben bessere Unterstützung für CSS mit hardwarebeschleunigtem 3D und Animation geboten.
Dank Websites wie CodePen können wir leichter teilen und lernen als je zuvor. Was sind einige der inspirierendsten Animations-Demos, die Sie in letzter Zeit gesehen haben?
