Share
Nos navigateurs mobiles continuent de devenir plus puissants et plus efficaces pour nous montrer des animations incroyables et magnifiques. Lorsque combiné avec la puissance de mise en page de CSS, il est possible de créer un travail magnifique sans utiliser aucune image. Le résultat est évolutif, à chargement rapide et impressionnant à voir.
Jetons un coup d'œil à ce que les gens créent et animent avec HTML et CSS.
Il y a tellement de choses qu'il est difficile de croire qu'il s'agit simplement de HTML et de CSS! Des animations rotatives et de multiples mouvements en couches se combinent pour donner l’impression que ce cycliste et son vélo sont faits de gelée. Belle utilisation de BEM dans les noms de classe aussi!
La combinaison de nombreuses pièces mobiles peut donner l’impression que de simples ensembles HTML ressemblent à une animation plus complexe, et c’est quelque chose que cette démo fait bien. Voyez comment les deux planètes interagissent, alors que les «particules» en boucle sont juste suffisamment dispersées pour paraître aléatoires.
De simples couches colorées peuvent sembler peu, mais quand elles se déplacent, elles peuvent transmettre beaucoup de caractère. Dans cet exemple, un ensemble de balises de paragraphe HTML semi-transparentes est animé et l'animation empilée obtenue est hypnotique..
Nous n'avons pas toujours besoin de fichiers JPG ou PNG pour créer de belles images, et ceci est un autre exemple. Un conteneur et quatre autres sont tout ce dont vous avez besoin pour créer cette image de chargeur délicieusement regardable sur le thème de la crème glacée. Le code résultant est beaucoup plus petit qu'un GIF animé..
Lorsque vous combinez l’utilisation artistique d’éléments HTML à des animations remplies de caractères, vous obtenez le résultat. Une animation incroyablement fluide et pourtant remplie d'amusement. Respect massif à Julia Muzafarova pour ce qui a dû être un travail incroyablement fastidieux pour la construction de tous ces ensembles d'images clés. Plus que quelques cafés aussi!
Réunissant de nombreux éléments HTML simples avec une multitude d'animations subtiles et amusantes, ce chat endormi a beaucoup de caractère. Cet exemple utilise Sass et des variables pour contrôler l'animation. Essayez d'en changer pour voir ce qui se passe!
Des animations fluides peuvent être obtenues en utilisant HTML et CSS, en particulier lorsque nous respectons certains principes de base. Cette animation réduit au minimum le nombre d'éléments et permet une utilisation optimale des transformations..
Des animations rapides peuvent ajouter beaucoup de caractère lorsqu'elles sont combinées. Dans cette démo, découvrez comment des bulles et des éclaboussures sont chorégraphiées ensemble pour créer une animation mignonne avec une éponge joyeuse, le tout sans images.
Une série d'animations d'images clés peut raconter une histoire ou aider les gens à comprendre ce qu'ils regardent. Nous voyons ici ouvrir une enveloppe et recevoir une lettre.
Un peu de mouvement subtil peut créer de grandes sensations d'intensité! Ce chargeur a une voiture qui ressemble à une vitesse, toutes créées avec quelques éléments et animations CSS. Sans images, cela chargerait rapidement.
Merci, comme toujours, à CodePen et aux esprits créatifs à l’origine de ces démonstrations; ils nous ont certainement fourni beaucoup d’inspiration dans ces exemples d’animation. Consultez les articles suivants pour en savoir plus et apprendre à créer vos propres animations CSS!
Accentsconagua