Tasse de Café : Pikachu animé en CSS3
mercredi 5 décembre 2012 à 10:00Depuis 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 !
Original post of Tasse de Café.Votez pour ce billet sur Planet Libre.
Articles similaires
- Tasse de Café : Pacmanimation : une animation de Pac-Man tout en HTML5 et CSS3 (26/10/2012)
- Tasse de Café : Le générique de Star Wars en CSS3 (29/10/2012)
- Tasse de Café : Super Mario Bros. en Media Queries CSS (02/11/2012)
- Tasse de Café : Un trombone en HTML5 et CSS3 (02/11/2012)