Cabaran Hadapan: Seni CSS -Edisi Disember

Cabaran Seni CSS 2024

Ini adalah penyerahan untuk Cabaran Frontend - Edisi Disember, Seni CSS: Disember.

Inspirasi

Selepas terjumpa tapak Bryan James, tempat dia mencipta 30 spesies terancam menggunakan poligon CSS, saya menganggapnya sebagai tanda untuk mula bereksperimen dengan alat yang bagus ini.

Demo

https://emmy-zhang.github.io/css-art/

Perjalanan

• Lakaran: Lakarkan ayam hutan dalam segi tiga, diilhamkan oleh lagu 12 Days of Christmas.
• Kerangka: Menggariskan elemen dalam HTML, membentuknya secara kasar ke dalam bentuk yang diingini dengan poligon CSS.
• Perhalusi: Mengalih elemen ke tempatnya secara manual.
• Penggayaan: Warna dikemas kini, menambahkan beberapa animasi untuk pizzaz.
• Mudah alih: Nah, ada sebab mengapa mereka menyebut "mudah alih didahulukan." Selepas menguji pada skrin yang lebih kecil, elemen bertaburan, jadi saya mengemas kini ketinggian dan lebar elemen secara manual untuk menampung skrin yang lebih kecil.

Dalam tapak Bryan James, pengesan JS telah digunakan pada imej sedia ada untuk mencipta poligon. Saya memilih pendekatan yang kurang canggih untuk masa dan kewarasan, tetapi saya bayangkan dengan pengesan poligon boleh dibuat secara dinamik dan akan menjadikan penggayaan mudah alih dan animasi lebih mudah - mungkin projek untuk kali seterusnya :) Saya seronok dan belajar sedikit dengan yang ini!

Atas ialah kandungan terperinci Cabaran Hadapan: Seni CSS -Edisi Disember. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!