Coole CodePen-Demos (4. September)

Ausgefallener Avatar-Header mit Hover-Effekt (II)

Temani Afif hat immer einen coolen CSS-Trick auf Lager. Diesmal handelt es sich um eine animierte Kerbe, die sich an die Position des Avatars anpasst. Und das alles in nur wenigen Zeilen HTML- und CSS-Code.

---

Der Stundenzeiger

Bewegen Sie den Stick und sehen Sie, wie sich das Fenster ändert, um die Tageszeit anzuzeigen. Diese interaktive Demo von Rafa ist gut gestaltet und passt sich der Zeit des Computers an und bietet ein personalisiertes Erlebnis.

---

Leichte Pixelverzerrungsanimation

Ein lustiges Experiment mit Shadern von Ksenia Kondrashova. Passen Sie die Kachelgröße und den Versatz an, um unterschiedliche Effekte zu erzielen. Ich konnte mir vorstellen, dass dieser Effekt zur Simulation von Wasser- oder Sandtexturen verwendet wurde. Bewegungswarnung: Bei dieser Demo könnte Ihnen schwindelig werden.

---

Kiefern

Guillaume Martigny bringt einen endlosen Wald aus Kiefern mit, der mit Pencil.js erstellt wurde, einer JavaScript-2D-Zeichenbibliothek, die einen beruhigenden 3D-Effekt mit einer Zenitansicht der Bäume erzeugt.

---

Tanzende Käfer (animiert)

Inspiriert von einem Cartoon auf Dribbble hat Grant Jenkins eine wunderschöne Animation mit tanzenden Käfern erstellt. Die Zeichnung erfolgt mit und JavaScript, und es ist reibungslos und macht Spaß (so viele Details!)

---

Docker

Einige CSS-Kunst von Mergim Ujkani: eine animierte Version des Docker-Logowals, der im Meer schwimmt und springt. Es ist einfach und unterhaltsam und nur mit HTML und CSS codiert.

---

Zielbereich innerhalb von Keyframes – Ansichtszeitleistenbereiche

Eine schöne scrollgesteuerte Animationsdemo von Mariana Beldi. Die Elemente werden verschoben, verkleinert und ausgeblendet, wodurch ein reibungsloses Scrollen entsteht. Es sind diese kleinen Dinge, die Websites auf die nächste Stufe heben.

---

Olympische Medaillen

Eine olympische Medaillenzählerkomponente von Gibson. Mit React und Framer Motion erstellt, würde es ein cooles Widget auf einer Sport-Website ergeben, insbesondere in Kombination mit anderen Komponenten zur Steuerung der Animationen.

---

Aufnahme umschalten

Eine neue interaktive Komponente von Jon Kantner: ein Aufzeichnungs-Widget, das bei jeder Benutzerinteraktion (am Anfang und am Ende) und im Laufe der Zeit animiert wird. Glatt.

---

Spinnen

yuanchuan erstellt wunderschöne animierte SVG- und CSS-Doodles, und dieses hier ist keine Ausnahme. Die sich drehende Animation ist faszinierend und hypnotisch ... Und der Code ist so einfach! Unglaublich erstaunlich.

---

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