Pikachu animé en CSS3

Depuis pas mal de semaines maintenant, nous avons déjà vu quelques bonnes réalisations créées grâce au CSS3 comme le générique de Star Wars, Pacmanimation ou même Super Mario Bros.. Aujourd’hui, il s’agit donc d’un Pikachu, la mascotte des Pokémon, la fameuse souris électrique jaune emblématique des petits (ou gros) monstres de poche et qui a donc contribué fortement au succès de ces derniers.

Ce Pikachu a donc été réalisé entièrement en CSS et, contrairement à la Joconde que nous avions déjà vue, notre petite bestiole n’est pas une image qui a été reproduite avec de « simples » box-shadow, non, il s’agit bien d’une pure création avec des div arrangés comme il le faut pour représenter la souris bien connue.

Et là où c’est encore plus fort, c’est que ce Pikachu est animé et, si on peut voir ses petites oreilles bouger tranquillement, on peut également voir ses yeux cligner, des yeux qui font ressortir une expression de colère par moment et cette colère ne sert pas à rien. Non, car que serait Pikachu sans électricité ? Une simple souris transgénique me direz-vous, et vous aurez bien raison.

C’est pourquoi nous pouvons voir quelques éclairs surgir des joues rouges de notre joyeux rongeur. Et si vous vous demandez comment cela a été rendu possible, sachez que c’est en réalité plutôt simple mais, comme d’habitude, il fallait y penser ! Ces éclairs sont en fait des div possédant une couleur de fond blanche et ayant subi une rotation : plusieurs div comme ça et vous réalisez des éclairs !