Démos sympas de CodePen (4 juillet)

Largeur/hauteur de l'écran (CSS uniquement)

Temani Afif apparaît généralement dans cette liste avec des démos CSS. Cette fois, à cause de quelque chose d'impressionnant : en combinant des propriétés personnalisées avec des fonctions at-property et trigonométriques, il peut afficher la hauteur et la largeur de l'écran… sans aucun JavaScript !

---

Objets blob interactifs WebGL

Passez la souris sur ces jolies blobs pour les voir réagir et bouger (encore plus qu'ils ne le font déjà). Il s'agit d'une démo amusante avec WebGL par Ksenia Kondrashova qui pourrait être utilisée comme arrière-plan interactif (et distrayant) sur un site Web.

---

Hack de citation de film

Si vous aimez les citations de films et les jeux de pendu rapides, cette démo d'Alexandre Vacassin est faite pour vous : devinez la citation du film en cliquant sur les lettres (pas d'option clavier, autant que je sache). Mais attention : vous disposerez d'une minute pour terminer la tâche, et chaque tentative infructueuse vous enlèvera 5 secondes.

---

Labyrinthe d'anneaux

Un autre jeu, cette fois par ZIM. Ce labyrinthe tridimensionnel, créé avec ThreeJS, a la forme d'un anneau. Dans cette démo divertissante codée pour un défi CodePen, la balle suivra la souris dans le labyrinthe (cela peut parfois être difficile).

---

Effet de survol de la navigation

Veronica Hristova a codé cette navigation interactive. Il utilise les pseudo-éléments ::before et ::after pour dupliquer le texte spécifié dans un attribut de données et générer un effet 3D coloré au survol. Simple et cool.

---

Three.Js Blobby Pomme

Ceci est une autre démo de Ksenia Kondrashova. Tournez autour de cette pomme qui bouge de manière fluide lorsqu'elle tourne, perdant sa forme et en reprenant une nouvelle : une belle expérience avec ThreeJS.

---

Application Bill Splitter

Inspiré d'un design trouvé sur Dribbble (lié dans la description du codepen), Dilum Sanjaya a codé une version live de ce séparateur de factures en utilisant React et Tailwind. Ça a l'air soigné.

---

Moineau

Il y a eu peu d'art CSS dans cette série ces derniers temps, et ce magnifique dessin de moineau d'Alina est un retour remarquable. Basé sur un dessin de Behance (lié dans le code), la simplicité du code contraste avec la propreté du dessin. Un travail incroyable.

---

Créature du lagon IK

Déplacez la souris sur l'écran et voyez comment cette créature/blob la suit. Initialement attaché au sommet, ce ver (? sangsue ? créature !) se détachera et grandira au fur et à mesure de ses mouvements. Liam Egan a développé cette démo.

---

Jenga 3D — CSS

Un jeu CSS 3D programmé par Josetxu. Bien que le Jenga ne soit pas entièrement jouable, vous pouvez cliquer sur les pièces du milieu, qui s'animeront et se déplaceront (vous pourrez ensuite les repousser à l'intérieur en "Jenga inversé").

---

---

Si vous aimez ces démos, consultez l'article précédent avec 10 démos Cool CodePen de juin 2024 !

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!