Emoji Roket

Ini ialah penyerahan untuk Frontend Challenge v24.09.04, CSS Art: Space.

Inspirasi

Penyerahan ini diilhamkan dengan meraikan kejayaan orang ramai dalam sembang. Satu emoji berkaitan ruang yang digunakan untuk mengakui kemenangan mereka ialah emoji roket.

Demo

Perjalanan

Cabaran ini memberikan pengalaman pembelajaran yang sangat baik. Tugasnya adalah untuk mencipta emoji roket menggunakan CSS dan HTML, yang melibatkan pembuatan bentuk yang biasanya tidak dilihat di tapak web.
Saya mulakan dengan memecahkan imej kepada 8 bahagian:

1. Badan
2. Kon Hidung
3. Tetingkap
4. Sirip Kiri
5. Sirip Tengah
6. Sirip Kanan
7. Muncung
8. Nyala

Body ialah elemen div yang diputar 45 darjah dengan jejari sempadan ditambah pada setiap sudut untuk memberikan rupa bulat. Elemen ini mengandungi Kon Hidung dan Tetingkap. Kon Hidung ialah elemen div dengan jejari sempadan 50% yang menjadikannya bulatan. Ia diletakkan di bahagian atas Badan. Tetingkap adalah serupa dengan Kon Hidung tetapi ia mempunyai sempadan untuk memberikan bingkai tingkap dan ia diletakkan berhampiran bahagian tengah Badan. Sirip Kiri ialah elemen div dengan atribut laluan klip. Menggunakan atribut ini saya boleh menentukan poligon, yang membolehkan saya melukis sirip. Sirip Tengah ialah elemen div dengan bucu bulat. Sirip Kanan serupa dengan Sirip Kiri tetapi ia terbalik. Muncung ialah elemen div segi empat tepat dengan bucu bulat. Nyala ialah elemen div segi empat sama dengan jejari sempadan yang berbeza-beza untuk setiap sudut. Jidar dengan warna yang lebih dalam telah ditambahkan pada Nyala untuk memberikannya lebih rupa nyalaan. Animasi telah ditambahkan pada Flame yang hanya menukar saiz dan kelegapan setiap 2 saat selama-lamanya. Latar belakang ialah satu siri atribut kecerunan jejari yang digunakan untuk mencipta bulatan putih rawak dengan saiz yang berbeza-beza di lokasi yang berbeza.

Saya mempelajari beberapa teknik CSS baharu, termasuk cara mencipta animasi dan poligon. Pada masa hadapan, saya berharap dapat menambahkan lebih banyak animasi pada roket.

Atas ialah kandungan terperinci Emoji Roket. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!