Démos sympas de CodePen (4 septembre)

En-tête d'avatar fantaisie avec effet de survol (II)

Temani Afif a toujours une astuce CSS sympa dans sa manche. Cette fois, il s’agit d’une encoche animée qui s’adapte à la position de l’avatar. Et le tout en quelques lignes de code HTML et CSS.

---

L'aiguille des heures

Déplacez le bâton et voyez la fenêtre changer pour refléter l'heure de la journée. Cette démo interactive de Rafa est joliment conçue et s'adaptera au temps de l'ordinateur, offrant une expérience personnalisée.

---

Animation légère de distorsion de pixels

Une expérience amusante avec les shaders par Ksenia Kondrashova. Personnalisez la taille et le décalage des carreaux pour différents effets. J'ai pu voir cet effet utilisé pour simuler des textures d'eau ou de sable. Avertissement de mouvement : cette démo pourrait vous donner le vertige.

---

Pins

Guillaume Martigny apporte une forêt infinie de pins créée avec Pencil.js, une bibliothèque de dessins JavaScript 2D qui crée un effet 3D apaisant avec une vue zénithale des arbres.

---

Insectes dansants (animé)

Inspiré d'un dessin animé sur Dribbble, Grant Jenkins a créé une belle animation avec des insectes dansants. Le dessin est réalisé à l'aide de et JavaScript, et c'est fluide et amusant (tant de détails !)

---

Docker

Quelques CSS Art par Mergim Ujkani : une version animée du logo de Docker, une baleine nageant et sautant dans l'océan. C'est simple et amusant, et codé uniquement avec HTML et CSS.

---

Plage cible À l’intérieur des images clés : plages de visualisation et de chronologie

Une belle démo d'animation par défilement par Mariana Beldi. Les éléments bougent, rétrécissent et disparaissent, créant une expérience de défilement fluide. Ce sont ces petites choses qui font passer les sites Web au niveau supérieur.

---

Médailles olympiques

Un composant compteur de médaille olympique par Gibson. Créé avec React et Framer Motion, il ferait un widget sympa sur un site Web de sport, surtout s'il est combiné avec d'autres composants pour contrôler les animations.

---

Bascule d'enregistrement

Un nouveau composant interactif de Jon Kantner : un widget d'enregistrement qui s'anime à chaque interaction de l'utilisateur (au début et à la fin) et au fil du temps. Brillant.

---

Filage

yuanchuan crée de superbes doodles SVG et CSS animés, et celui-ci ne fait pas exception. L'animation tournante est fascinante et hypnotique… Et le code est si simple ! Incroyablement incroyable.

---

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!