Cool CodePen Demos (September 4)

Fancy Avatar Header With Hover Effect (II)

Temani Afif always has a cool CSS trick up the sleeve. This time, it is an animated notch that adapts to the avatar’s position. And all in just a few lines of HTML and CSS code.

---

The Hour Hand

Move the stick and see the window change to reflect the time of day. This interactive demo by Rafa is nicely crafted and will adapt to the computer’s time, offering a personalized experience.

---

Lightweight Pixel Distortion Animation

A fun experiment with shaders by Ksenia Kondrashova. Customize the tile size and offset for different effects. I could see this effect used to simulate water or sand textures. Motion warning: this demo could make you dizzy.

---

Pine Trees

Guillaume Martigny brings an infinite forest of pine trees created with Pencil.js, a JavaScript 2D drawing library that creates a calming 3D effect with a zenithal view of the trees.

---

Dancing Bugs (Animated)

Inspired by a cartoon on Dribbble, Grant Jenkins created a beautiful animation with dancing bugs. The drawing is done using and JavaScript, and it is smooth and fun (so many details!)

---

Docker

Some CSS Art by Mergim Ujkani: an animated version of the Docker’s logo whale swimming and jumping in the ocean. It is simple and fun, and coded only with HTML and CSS.

---

Target Range Inside keyframes— view-timeline ranges

A nice scroll-driven animation demo by Mariana Beldi. The elements move, shrink, and fade out creating a smooth scrolling experience. These little things are what take websites to the next level.

---

Olympic Medals

An Olympic Medal counter component by Gibson. Created with React and Framer Motion, it would make a cool widget on a sports website, especially if combined with other components for controlling the animations.

---

Recording Toggle

A new interactive component by Jon Kantner: a recording widget that animates with every user interaction (at the beginning and end) and as time passes. Slick.

---

Spinning

yuanchuan creates beautiful animated SVG and CSS Doodles, and this one is no exception. The spinning animation is mesmerizing and hypnotic… And the code is so simple! Incredibly amazing.

---

The above is the detailed content of Cool CodePen Demos (September 4). For more information, please follow other related articles on the PHP Chinese website!