Temani Afif erscheint normalerweise in dieser Liste mit CSS-Demos. Diesmal wegen etwas Beeindruckendem: Durch die Kombination benutzerdefinierter Eigenschaften mit at-property- und trigonometrischen Funktionen kann er die Bildschirmhöhe und -breite anzeigen ... überhaupt kein JavaScript!
Fahren Sie mit der Maus über diese niedlichen Kleckse, um zu sehen, wie sie reagieren und sich bewegen (noch mehr, als sie es ohnehin schon tun). Dies ist eine unterhaltsame Demo mit WebGL von Ksenia Kondrashova, die als interaktiver (und ablenkender) Hintergrund auf einer Website verwendet werden könnte.
Wenn Sie Filmzitate und rasante Galgenmännchenspiele mögen, ist diese Demo von Alexandre Vacassin genau das Richtige für Sie: Erraten Sie das Filmzitat, indem Sie auf die Buchstaben klicken (keine Tastaturoption, afaik). Aber seien Sie vorsichtig: Sie haben eine Minute Zeit, um die Aufgabe zu erledigen, und für jeden fehlgeschlagenen Versuch werden 5 Sekunden abgezogen.
Ein weiteres Spiel, dieses Mal von ZIM. Dieses mit ThreeJS erstellte dreidimensionale Labyrinth hat die Form eines Rings. In dieser unterhaltsamen Demo, die für eine CodePen-Herausforderung codiert ist, folgt der Ball der Maus durch das Labyrinth (das kann manchmal eine Herausforderung sein).
Veronica Hristova hat diese interaktive Navigation codiert. Es verwendet die Pseudoelemente ::before und ::after, um den in einem Datenattribut angegebenen Text zu duplizieren und beim Schweben einen farbenfrohen 3D-Effekt zu erzeugen. Einfach und cool.
Dies ist eine weitere Demo von Ksenia Kondrashova. Drehen Sie sich um diesen Apfel, der sich beim Drehen fließend bewegt, seine Form verliert und wieder eine neue annimmt – ein schönes Experiment mit ThreeJS.
Inspiriert von einem Design auf Dribbble (verlinkt in der Codepen-Beschreibung) hat Dilum Sanjaya mit React und Tailwind eine Live-Version dieses Rechnungssplitters programmiert. Es sieht ordentlich aus.
In letzter Zeit gab es in dieser Serie nur wenig CSS-Kunst, und diese wunderschöne Spatzenzeichnung von Alina ist ein bemerkenswertes Comeback. Basierend auf einer Zeichnung von Behance (im Code verlinkt) steht die Einfachheit des Codes im Kontrast zur Sauberkeit der Zeichnung. Erstaunliche Arbeit.
Bewegen Sie die Maus über den Bildschirm und sehen Sie, wie diese Kreatur/dieser Klecks ihr folgt. Ursprünglich an der Spitze befestigt, löst sich dieser Wurm (? Blutegel? Kreatur!) ab und wächst, während er sich bewegt. Liam Egan hat diese Demo entwickelt.
Josetxu によってプログラムされた 3D CSS ゲーム。ジェンガは完全には再生できませんが、中央のピースをクリックするとアニメーションして動きます (その後、「逆ジェンガ」でそれらを内側に押し戻すことができます)。
これらのデモが気に入ったら、2024 年 6 月の 10 個のクールな CodePen デモを含む前の記事をチェックしてください!
Das obige ist der detaillierte Inhalt vonCoole CodePen-Demos (4. Juli). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
So verwenden Sie die datediff-Funktion
GT540
Windows kann nicht auf den angegebenen Gerätepfad oder die angegebene Dateilösung zugreifen
Was ist ein UI-Designer?
vb.net-Tutorial
Der Unterschied zwischen Pastenmaske und Lötstoppmaske
So legen Sie die URL des tplink-Routers fest
So öffnen Sie das AI-Format in Windows
