Nyan Nyan Cat in HTML und CSS

Alle Jahre wieder bin süchtig nach der Nyan Nyan Cat. Dieses Mal wollte ich allerdings etwas sinnvolles mit der neuen Sucht machen.

Also entschloß ich mich, die Nyan Nyan Cat nachzubauen. Zunächst im Lego Digital Designer

First #legobuilder #nyan #cat model finished. Next Step: Get some real #Lego.

A photo posted by Dennis Fischer (@ichderfisch) on

und anschließend in Photoshop als einfache Keyframe-Animation:

Nyan_small

Und zu guter letzt mit HTML und CSS. Da ich bereits für die Photoshop Keyframe-Animation alle 6 Frames des Originals nachgebaut habe, konnte ich die Grafiken für eine CSS-Animationen nutzen. Zunächst habe ich ein PNG-Sprite erstellt die so aussieht:

nyan-5

Mit von CSS3-Animations kann man eine Keyframe-Animation nachbauen. Das Ganze ist im folgenden Ergebnis ergänzt um eine einfache Hintergrundanimationen.

See the Pen Nyan Cat by Dennis Fischer (@ichderfisch) on CodePen.0

Checkt den Codepen um zu erfahren, wie die Animation funktioniert.

Es fehlt noch der Regenbogen, aber der folgt bei Gelegenheit. Auch die Sterne sind anders als im Original, aber das ist meiner künstlerischen Freiheit geschuldet. Ich schreib ein Update, wenn es bei beidem Neuigkeiten gibt.

Ich frage mich derzeit, ob es wirklich notwendig ist, dass jeder Stern im Hintergrund ein eigenes DOM-Element sein muss, oder ob sich das auch eleganter lösen lässt.