CSS A/Z

CSS A/Z (CSS de A à Z) est un abcédaire de l’animation CSS. Chaque lettre de l’alphabet est une animation qui a été codé en HTML et CSS. Pas de Javascript, ni meme de SVG. Chaque jour, une nouvelle lettre apparait. Allez-voir un coup d’oeil aux prochaines lettres qui sortent.

P comme Polaroid.
P comme Polaroid.
K comme 'Kite'.
K comme ‘Kite’.
J comme Joystick.
J comme Joystick.
I comme 'Ice Cream'.
I comme ‘Ice Cream’.
E comme Espresso.
E comme Espresso.
C comme Compas.
C comme Compas.
B comme Bicyclette.
B comme Bicyclette.
A comme Atome.
A comme Atome.

Example avec la lettre S, comme Spaceship

Evidemment, le jeu est amusant s’il est possible de comprendre comment l’animation est codée. Pour cette animation, il suffit de voir le code source sur JSFiddle.

On realise que les boucles de l’animation sont bien plus complexes, et ainsi générer des animations de ce type sont tout bonnement impossibles à générer en GIF. Exemple ci-dessous.

s-spaceship

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *