Demo CodePen yang Hebat (4 Oktober)

Kesan Herotan Air Ringan

Ksenia Kondrashova mencipta demo dengan shader yang cantik dengan kesan air. Ia kelihatan realistik, seperti air yang bergerak di kolam renang. Rasanya menenangkan dan hipnosis.

---

Kesan paralaks 3D pada tuding

Temani Afif mencipta kesan menakjubkan menggunakan tag imej tunggal. Ini adalah contoh yang bagus: Satu teg HTML mencipta kesan 3D yang mengejutkan... dan kodnya sangat mudah! Demo hampir tidak memerlukan 18 baris CSS!

---

Ketepuan terpilih pada tuding

Satu lagi demo hebat menggunakan satu elemen imej. Ana Tudor menggunakan penapis SVG untuk menggunakan topeng interpolasi warna dan menyerlahkan elemen gambar berdasarkan warna.

---

Kentang Yang Mengganggu

Anda memerlukan pembesar suara untuk tunjuk cara yang menyeronokkan ini oleh Sophia Wood (aka Fractal Kitty). Klik pada butang bunyi atau tekan butang 1–8 untuk membuat kentang bercakap… tetapi berhati-hati, ia mungkin sama menghiburkan dan menjengkelkan.

---

Galeri Roda (CSS sahaja)

Galeri pekeliling animasi yang dicipta oleh Chris Bolson. Tetikus pada gambar dan lihat ia bernyawa. Saya suka bagaimana tajuk itu muncul bersama pergerakan foto. Lancar.

---

pointilisme imej NASA

Satu lagi demo oleh Sophia Wood. Dia menggunakan P5 untuk menjana mata yang dijana tanpa had. Setiap kitaran mereka akan berada pada saiz yang lebih kecil, mendedahkan gambar ruang. Seperti biasa, gabungan kreatif seni dan kod.

---

jadual penyemak kontras warna

Ini lebih kepada demo kebolehaksesan "nerdy": grid dengan semua nama warna CSS dan kombinasi kontras warnanya. Dave Rupert menggunakan spesifikasi WCAG 2.1 untuk menentukan keputusan.

---

Tanda Halaman Saya

Chris Coyier mereplikasi tanda ikonik ini, menggunakan animasi dipacu tatal untuk membolehkan semua baris melaraskan secara dinamik (teks boleh diedit) fonnya supaya semua baris menempati lebar yang sama. Kerana ia menggunakan sifat julat animasi, tunjuk cara ini hanya akan berfungsi pada Chrome.

---

Tindanan kad animasi dipacu tatal dengan acara snap tatal

Paul Noble mencipta tindanan kad yang menakjubkan yang menggabungkan animasi dipacu tatal dengan acara snap tatal. Anda perlu menggunakan pad jejak (demo ini tidak akan berfungsi dengan tetikus) untuk menikmati peralihan yang menarik.

---

Kemajuan berganda yang cepat

Satu lagi demo oleh Ana Tudor. Kod ini bersih, pendek dan semantik. Saya menyukai reka bentuk komponen ini (daripada soalan Reddit?) dan dapat melihat diri saya menggunakan sesuatu yang serupa dalam beberapa projek.

---

---

Jika anda menyukai senarai ini, lihat demo bulan lepas!

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