Share
Unsere mobilen Browser werden immer leistungsfähiger und zeigen uns erstaunlich schöne Animationen. In Kombination mit der Layout-Fähigkeit von CSS ist es möglich, großartige Arbeiten zu erstellen, ohne Bilder zu verwenden. Das Ergebnis ist skalierbar, schnell geladen und beeindruckend.
Lassen Sie uns einen Blick darauf werfen, was erstaunliche Dinge nur mit HTML und CSS erzeugen und animieren.
Es ist so viel los, dass man es kaum glauben kann, dass es einfach HTML und CSS ist! Rotierende Animationen und mehrere, mehrschichtige Bewegungen sorgen dafür, dass es so aussieht, als ob dieser Radfahrer und sein Fahrrad aus Gelee bestehen. Netter Einsatz von BEM auch in der Klassennamen!
Wenn Sie viele bewegliche Teile kombinieren, kann ein einfacher Satz von HTML-Elementen wie eine komplexere Animation wirken. Dies ist etwas, was diese Demo gut macht. Sehen Sie, wie sich die beiden Planeten gegenseitig beeinflussen, während die schleifenden "Teilchen" gerade so zerstreut sind, dass sie zufällig wirken.
Einfache farbige Schichten scheinen nicht viel zu sein, aber wenn sie sich bewegen, können sie eine Menge Charakter vermitteln. In diesem Beispiel werden einige semitransparente HTML-Absatz-Tags animiert, und die resultierende gestapelte Animation ist hypnotisch.
Wir benötigen nicht immer JPGs oder PNGs, um schöne Bilder zu erstellen. Dies ist ein weiteres Beispiel. Ein Container-Div und vier andere sind genug, um dieses köstlich beobachtbare, kleine Eis-Lader-Image zu schaffen. Der resultierende Code ist viel kleiner als ein animiertes GIF.
Wenn Sie die künstlerische Verwendung von HTML-Elementen mit einer animierten Animation kombinieren, ist dies das Ergebnis. Eine erstaunlich geschmeidige, aber geschäftige Animation voller Spaß. Massiver Respekt vor Julia Muzafarova für das, was unglaublich fummelig gewesen sein muss, um all diese Keyframes zu erstellen. Mehr als nur ein paar Kaffees!
Diese schläfrige Katze vereint viele einfache HTML-Elemente mit einer Reihe subtiler, lustiger Animationen und hat viel Charakter. In diesem Beispiel werden Sass und Variablen zur Steuerung der Animation verwendet. Ändern Sie einige, um zu sehen, was passiert!
Durch die Verwendung von HTML und CSS lassen sich glatte Animationen erzielen, insbesondere wenn wir einige grundlegende Prinzipien beachten. Diese Animation reduziert die Anzahl der Elemente auf ein Minimum und die Verwendung von Transformationen.
Schnelle Animationen können viel Charakter hinzufügen, wenn sie kombiniert werden. In dieser Demo können Sie sehen, wie Blasen und Spritzer zusammen choreographiert werden, um niedliche Animationen mit einem fröhlichen Schwamm zu erstellen, alles ohne Bilder.
Eine Reihe von Keyframe-Animationen kann eine Geschichte erzählen oder den Leuten helfen zu verstehen, was sie sich ansehen. Hier sehen wir einen Umschlag und erhalten einen Brief.
Ein bisschen subtile Bewegung kann große Gefühle erzeugen! Dieser Lader sieht aus wie ein Auto, das mit einigen Elementen und CSS-Animationen erstellt wird. Ohne Bilder würde dies schnell geladen werden.
Vielen Dank an CodePen und die kreativen Köpfe dieser Demos. Sie haben uns in diesen Animationsbeispielen sicherlich sehr inspiriert. In den folgenden Beiträgen erfahren Sie mehr darüber und wie Sie Ihre eigenen CSS-Animationen erstellen können!
Accentsconagua