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 !
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.
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 aurez une minute pour terminer la tâche, et chaque tentative infructueuse vous enlèvera 5 secondes.
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).
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.
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.
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é.
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.
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.
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!
types de données de base Java
Quelle devise est le BTC ?
Comment résoudre le problème de l'échec du chargement de la DLL
Tableau de comparaison des codes ASCII
À quoi fait référence le bean en Java ?
Comment changer de ville sur Douyin
Comment utiliser la grande fonction
Nettoyer les fichiers indésirables dans Win10
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
