Demo CodePen yang Hebat (4 Julai)-tutorial css-php.cn

Cool CodePen Demos (July 4)

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 aurez 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

Permainan CSS 3D yang diprogramkan oleh Josetxu. Walaupun Jenga tidak boleh dimainkan sepenuhnya, anda boleh mengklik pada bahagian tengah, yang akan bernyawa dan bergerak (kemudian anda boleh menolaknya semula ke dalam dalam "Jenga terbalik").

Jika anda menyukai demo ini, lihat artikel sebelumnya dengan 10 demo CodePen Cool dari Jun 2024!

Atas ialah kandungan terperinci Demo CodePen yang Hebat (4 Julai). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!