Demo CodePen yang Hebat (4 Ogos)

bentuk idea

Demo ini ialah komponen penyerahan/peringatan idea yang hebat. Peralihan yang lancar, pilihan warna yang sempurna dan jumlah interaksi yang tepat menjadikan pengalaman pengguna yang bagus. Ini ialah yang pertama daripada dua tunjuk cara dalam senarai ini oleh Jon Kantner.

Robot berayun

Amit Sheen mempamerkan kuasa 3D CSS sekali lagi. Kali ini ia adalah robot yang bermain buaian. Semak butiran dan cara bahagian badan yang berbeza bergerak bersama untuk mencipta animasi yang cair dan cantik.

Metropolis Mata Burung

Pemandangan tak terhingga bandar dari langit yang mengagumkan (gerakkan tetikus ke atasnya untuk menukar arah.) Dan adakah anda tahu apa yang menjadikannya lebih menakjubkan? Ia tidak menggunakan mana-mana perpustakaan 3D yang popular! Ia adalah JavaScript vanila. Kudos kepada Niklas Knaack untuk demo yang luar biasa.

Chandler memeluk penjana meme album

Berdasarkan meme politik baru-baru ini (yang turut dikodkannya), Ines membawakan meme yang diilhamkan Rakan: Chandler Bean memegang album. Lengan ialah input fail, jadi anda boleh memperibadikan imej dengan apa sahaja yang anda mahukan. Kemas.

Saya dengar awak suka putaran

Satu lagi demo animasi 3D. Platform(?) terapung di angkasa, berputar dan berputar tanpa henti. Demo menghipnotis oleh Scott R McGann ini juga dikodkan dalam JavaScript vanila dan kanvas.

Papan Mood

Hannah berkongsi papan ini yang berfungsi sebagai galeri imej yang bagus untuk web. Dengan sedikit animasi dan peralihan, ia mempunyai suasana sekolah tinggi/kolej… Adakah sesiapa yang mengatakan nostalgia?

Zum skrol spatial 3D

Lebih banyak CSS 3D! (Pasti ada corak dalam senarai bulan ini.) Menggabungkan animasi dipacu tatal dengan terjemahan 3D dan kelegapan menghasilkan kesan hebat ini dalam CSS tulen. Ia adalah demo hebat oleh Adam Argyle.

Borang HTML Rube Goldberg

Ini adalah idea yang menyeronokkan yang dilaksanakan dengan kemas oleh Ksenia Kondrashova. Semasa anda mengisi borang, alat itu bergerak mendekatkan butang hantar untuk dilihat. Mesin itu mungkin tidak praktikal, tetapi ia menjadikan bentuknya berbeza dan membawa faktor wow.

Pratonton Mesej Teks dalam Lencana

Satu lagi komponen oleh Jon Kantner. Ini ialah cara yang menarik untuk menyampaikan data: bukan sahaja kita tahu ada mesej, tetapi kita boleh membacanya dengan menuding di atas lencana. Ini mungkin berguna selain mudah alih (di mana kesan tuding akan menjadi satu cabaran) dan untuk pemberitahuan di web juga.

karusel

Menutup senarai dengan, terdapat satu lagi demo CSS 3D, kali ini oleh Vicio Bonura, yang mencipta karusel CSS yang boleh membantu sebagai templat untuk menjana karusel lain kerana kodnya ringkas dan mudah diikuti.

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