Coole CodePen-Demos (4. August)

Ideenform

Diese Demo ist eine coole Komponente zur Einreichung/Erinnerung von Ideen. Die sanften Übergänge, eine perfekte Farbauswahl und das richtige Maß an Interaktionen sorgen für ein schönes Benutzererlebnis. Dies ist die erste von zwei Demos in dieser Liste von Jon Kantner.

Ein schwingender Roboter

Amit Sheen demonstriert erneut die 3D-Leistungsfähigkeit von CSS. Diesmal ist es ein Roboter, der auf einer Schaukel spielt. Überprüfen Sie die Details und wie sich die verschiedenen Körperteile zusammen bewegen, um eine flüssige und schöne Animation zu erzeugen.

Metropole aus der Vogelperspektive

Eine beeindruckende, unendliche Aussicht auf eine Stadt aus der Luft (bewegen Sie die Maus darüber, um die Richtung zu ändern.) Und wissen Sie, was sie noch erstaunlicher macht? Es verwendet keine der beliebten 3D-Bibliotheken! Es ist Vanilla-JavaScript. Ein großes Lob an Niklas Knaack für eine unglaubliche Demo.

Chandler umarmt einen Album-Meme-Generator

Basierend auf einem aktuellen politischen Meme (das sie auch codiert hat) bringt Ines ein von Friends inspiriertes Meme: Chandler Bean hält ein Album in der Hand. Bei der Hülle handelt es sich um eine Dateieingabe, sodass Sie das Bild nach Ihren Wünschen personalisieren können. Ordentlich.

Ich habe gehört, dass du Rotationen magst

Eine weitere 3D-animierte Demo. Eine Plattform(?), die im Weltraum schwebt und sich ununterbrochen dreht und dreht. Diese hypnotisierende Demo von Scott R McGann ist ebenfalls in Vanilla-JavaScript und einer Leinwand codiert.

Moodboard

Hannah hat dieses Board geteilt, das gleichzeitig als schöne Bildergalerie für das Web dient. Mit kleinen Animationen und Übergängen hat es eine High-School-/College-Atmosphäre … Hat jemand Nostalgie gesagt?

Räumlicher 3D-Scroll-Zoom

Mehr 3D-CSS! (In der Liste dieses Monats gibt es definitiv ein Muster.) Durch die Kombination von scrollgesteuerten Animationen mit 3D-Übersetzungen und Deckkraft entsteht dieser coole Effekt in reinem CSS. Es ist eine großartige Demo von Adam Argyle.

Rube Goldberg HTML-Formular

Das ist eine lustige Idee, die Ksenia Kondrashova geschickt umgesetzt hat. Während Sie das Formular ausfüllen, bewegt sich das Gerät und bringt die Schaltfläche „Senden“ näher an die Ansicht. Die Maschine mag unpraktisch sein, aber sie macht die Form anders und sorgt für einen Wow-Faktor.

Textnachrichtenvorschau im Badge

Eine weitere Komponente von Jon Kantner. Dies ist eine interessante Art der Datendarstellung: Wir wissen nicht nur, dass eine Nachricht vorliegt, sondern können sie auch lesen, indem wir mit der Maus über das Abzeichen fahren. Dies könnte über Mobilgeräte hinaus nützlich sein (wo der Hover-Effekt eine Herausforderung darstellen würde) und auch für Benachrichtigungen im Web.

Karussell

Abschließend gibt es noch eine 3D-CSS-Demo, dieses Mal von Vicio Bonura, der ein CSS-Karussell erstellt hat, das als Vorlage für die Generierung anderer Karussells dienen könnte, da der Code einfach und leicht zu befolgen ist.

Das obige ist der detaillierte Inhalt vonCoole CodePen-Demos (4. August). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!