Demo CodePen yang Hebat (4 Julai)

Lebar/Ketinggian Skrin (CSS Sahaja)

Temani Afif biasanya muncul dalam senarai ini dengan demo CSS. Kali ini, kerana sesuatu yang mengagumkan: menggabungkan sifat tersuai dengan fungsi at-property dan trigonometri, dia boleh memaparkan ketinggian dan lebar skrin... tiada JavaScript apa pun!

---

Gumpalan Interaktif WebGL

Arahkan tetikus ke atas gumpalan comel ini untuk melihatnya bertindak balas dan bergerak (malah lebih daripada yang sedia ada). Ini ialah demo yang menyeronokkan dengan WebGL oleh Ksenia Kondrashova yang boleh digunakan sebagai latar belakang interaktif (dan mengganggu) pada tapak web.

---

Hack Petikan Filem

Jika anda suka petikan filem dan permainan hang-man pantas, demo oleh Alexandre Vacassin ini adalah untuk anda: teka petikan filem dengan mengklik pada huruf (tiada pilihan papan kekunci, afaik). Tetapi berhati-hati: anda mempunyai satu minit untuk menyelesaikan tugasan dan setiap percubaan yang gagal akan menolak 5 saat.

---

Maze Cincin

Satu lagi permainan, kali ini oleh ZIM. Maze tiga dimensi ini, dicipta dengan ThreeJS, berbentuk seperti cincin. Dalam demo menghiburkan yang dikodkan untuk cabaran CodePen, bola akan mengikut tetikus mengelilingi labirin (ia boleh mencabar pada masa-masa tertentu).

---

Kesan Hover Navigasi

Veronica Hristova mengekodkan navigasi interaktif ini. Ia menggunakan ::before dan ::after pseudo-elements untuk menduplikasi teks yang dinyatakan dalam atribut data dan menjana kesan 3D berwarna-warni pada tuding. Mudah dan sejuk.

---

Three.Js Blobby Apple

Ini adalah satu lagi demo oleh Ksenia Kondrashova. Berputar di sekeliling epal ini yang bergerak lancar semasa ia berputar, kehilangan bentuknya dan mendapatkan semula yang baharu—percubaan yang bagus dengan ThreeJS.

---

Aplikasi Bill Splitter

Diinspirasikan oleh reka bentuk yang terdapat pada Dribbble (dipautkan dalam penerangan codepen), Dilum Sanjaya mengekodkan versi langsung pembahagi bil ini menggunakan React dan Tailwind. Nampak kemas.

---

Burung pipit

Terdapat sedikit Seni CSS dalam siri ini sejak kebelakangan ini, dan lukisan burung pipit yang cantik oleh Alina ini merupakan kemunculan semula yang luar biasa. Berdasarkan lukisan daripada Behance (dipautkan dalam kod), kesederhanaan kod berbeza dengan kebersihan lukisan itu. Kerja yang menakjubkan.

---

Makhluk dari lagun IK

Gerakkan tetikus di sekeliling skrin dan lihat cara makhluk/gumpalan ini mengikutinya. Pada mulanya melekat pada bahagian atas, cacing ini(? lintah? makhluk!) akan tertanggal dan tumbuh apabila ia bergerak. Liam Egan membangunkan demo ini.

---

Jenga 3D — CSS

Permainan CSS 3D yang diprogramkan oleh Josetxu. Walaupun Jenga tidak boleh dimainkan sepenuhnya, anda boleh mengklik pada bahagian tengah, yang akan bernyawa dan bergerak (anda boleh menolaknya semula ke dalam dalam "Jenga terbalik").

---

---

Jika anda menyukai demo ini, lihat artikel sebelumnya dengan 10 demo CodePen Cool mulai Jun 2024!

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