Anda semua tahu permainan video Pac-Man yang terkenal, bukan? Permainan ini menyeronokkan dan membina watak Pac-Man animasi di HTML dan CSS adalah menyeronokkan! Saya akan menunjukkan kepada anda bagaimana untuk membuat satu sambil memanfaatkan kuasa harta klip-laluan.
Adakah anda teruja? Mari kita sampai!
Pertama, mari kita bootstrap projek
Kami hanya memerlukan dua fail untuk projek kami: index.html dan style.css. Kita boleh melakukan ini secara manual dengan membuat folder kosong dengan fail di dalamnya. Atau, kita boleh menggunakan ini sebagai alasan untuk bekerja dengan baris arahan, jika anda mahu:
Mkdir Pacman CD PACMAN sentuh index.html && sentuh style.css
Sediakan gaya asas
Pergi ke gaya.css dan tambahkan gaya asas untuk projek anda. Anda juga boleh menggunakan perkara-perkara seperti Reset.css dan normalisasi.css untuk menetapkan semula gaya penyemak imbas, tetapi projek kami mudah dan mudah, jadi kami tidak akan berbuat banyak di sini. Satu perkara yang anda ingin lakukan dengan pasti menggunakan AutoPrefixer untuk membantu keserasian penyemak imbas.
Kami pada dasarnya menetapkan badan ke lebar penuh dan ketinggian viewport dan memusatkan perkara -perkara yang betul di tengah -tengahnya. Perkara seperti warna latar belakang dan fon adalah estetika semata -mata.
@import url ('https://fonts.googleapis.com/css?family=slabo 27px & display = swap'); *, *: selepas, *: sebelum { saiz kotak: kotak sempadan; } badan { Latar Belakang: #000; Warna: #FFF; Padding: 0; Margin: 0; Font-Family: 'Slabo 27px', Serif; Paparan: Flex; Ketinggian: 100VH; Justify-Content: Center; Align-item: pusat; }
Lihat, Pac-Man dalam html!
Adakah anda ingat bagaimana Pac-Man kelihatan? Dia pada dasarnya adalah bulatan kuning dan pembukaan dalam bulatan untuk mulut. Dia mesin makan dua dimensi!
Jadi dia mempunyai badan (atau dia hanya kepala?) Dan mulut. Dia bahkan tidak mempunyai mata, tetapi kami akan memberikannya.
Ini akan menjadi markup HTML kami:
<dana> <div> </div> <div> </div> </dana>
Berpakaian Pac-Man dengan CSS
Bahagian yang paling menarik bermula! Pergi ke style.css dan buat gaya untuk pac-man.
Pertama, kita akan mencipta badan/kepala/apa-apa-itu. Sekali lagi, itu hanya bulatan dengan latar belakang kuning:
.pacman { lebar: 100px; Ketinggian: 100px; Radius sempadan: 50%; Latar Belakang: #F2D648; Kedudukan: Relatif; margin-top: 20px; }
Mata (tidak wujud) beliau hampir sama-bulatan, tetapi lebih kecil dan kelabu gelap. Kami akan memberikan kedudukan mutlak supaya kami dapat meletakkannya di mana ia perlu:
.pacman__eye { Kedudukan: Mutlak; lebar: 10px; Ketinggian: 10px; Radius sempadan: 50%; Atas: 20px; Kanan: 40px; Latar Belakang: #333333; }
Sekarang kita mempunyai bentuk asas!
Menggunakan laluan klip untuk menarik mulut
Cukup mudah setakat ini, bukan? Jika Pac-Man kami akan makan beberapa titik (dan mengejar beberapa hantu), dia akan memerlukan mulut. Kami akan membuat satu lagi bulatan, tetapi menjadikannya hitam kali ini dan melapisi ia betul -betul di atas kepala kuningnya. Kemudian kami akan menggunakan harta klip-laluan untuk memotong sepotongnya-seperti bekas pai kosong kecuali satu pai terakhir.
.pacman__mouth { Latar Belakang: #000; Kedudukan: Mutlak; Lebar: 100%; Ketinggian: 100%; Clip-Path: Polygon (100% 74%, 44% 48%, 100% 21%); }
Kenapa poligon dan semua peratusan itu?!?! Perhatikan bahawa kami telah menubuhkan lebar dan ketinggian elemen. Fungsi poligon () mari kita lukis bentuk bentuk bebas di dalam batas elemen dan bentuk itu berfungsi sebagai topeng yang hanya memaparkan bahagian elemen itu. Oleh itu, kami menggunakan klip-laluan dan mengatakan bahawa kami mahu bentuk (poligon ()) yang mengandungi satu siri mata pada kedudukan tertentu (100% 74%, 44% 48%, 100% 21%).
Harta klip-laluan boleh menjadi sukar untuk grok. Almanak trik CSS membantu menerangkannya. Terdapat juga aplikasi clippy yang sejuk yang menjadikannya mudah untuk menarik bentuk klip-patch dan mengeksport CSS, yang saya lakukan untuk tutorial ini.
Setakat ini, begitu baik:
Buat Pac-Man makan
Kami mempunyai Pac-Man yang cukup cantik, tetapi ia akan menjadi lebih sejuk tetapi tidak ada cara baginya untuk mengunyah makanannya. Maksud saya, mungkin kita mahu menelan makanannya, tetapi kita tidak akan membenarkannya. Mari buat mulutnya terbuka dan tutup.
Apa yang perlu kita lakukan ialah menghidupkan harta klip-laluan, dan kita akan menggunakan @KeyFrames untuk itu. Saya menamakan animasi ini makan:
@keyframes makan { 0% { Clip-Path: Polygon (100% 74%, 44% 48%, 100% 21%); } 25% { Clip-Path: Polygon (100% 60%, 44% 48%, 100% 40%); } 50% { Clip-Path: Polygon (100% 50%, 44% 48%, 100% 50%); } 75% { Clip-Path: Polygon (100% 59%, 44% 48%, 100% 35%); } 100% { Clip-Path: Polygon (100% 74%, 44% 48%, 100% 21%); } }
Sekali lagi, saya menggunakan aplikasi Clippy untuk mendapatkan nilai -nilai, bagaimanapun, berasa bebas untuk lulus sendiri. Mungkin, anda akan dapat membuat animasi lebih lancar!
Kami mempunyai kerangka utama kami, jadi mari tambahkannya ke kelas .pacman kami. Kita boleh menggunakan harta animasi singkat, tetapi saya telah memecahkan sifat-sifat untuk membuat perkara lebih jelas supaya anda dapat melihat apa yang sedang berlaku:
Nama Animasi: Makan; Animasi-Pemulihan: 0.7s; Animasi-mengira-kiraan: tak terhingga;
Di sana kita pergi!
Kita mesti memberi makan pac-man
Jika Pac-Man boleh mengamuk, mengapa tidak memberinya makanan untuk dimakan! Mari sedikit mengubah suai markup HTML kami sedikit untuk memasukkan beberapa makanan:
<dana> <div> </div> <div> </div> <div> </div> </dana>
... dan mari kita gaya. Lagipun, makanan perlu selera ke mata serta mulut! Kami akan membuat satu lagi bulatan kerana itulah yang digunakan oleh permainan.
.pacman__food { Kedudukan: Mutlak; lebar: 15px; Ketinggian: 15px; Latar Belakang: #FFF; Radius sempadan: 50%; Atas: 40%; Kiri: 120px; }
Aw, pac-man yang lemah melihat makanan, tetapi tidak dapat memakannya. Mari buat makanan itu datang kepadanya dengan menggunakan taburan animasi CSS yang lain:
@KeyFrames Makanan { 0% { Transform: TranslateX (0); Kelegapan: 1; } 100% { Transform: TranslateX (-50px); Kelegapan: 0; } }
Sekarang kita hanya perlu lulus animasi ini ke kelas .pacman__food kami.
Nama Animasi: Makanan; Animasi-Pemulihan: 0.7s; Animasi-mengira-kiraan: tak terhingga;
Kami mempunyai pac-man yang gembira!
Seperti sebelum ini, animasi mengambil beberapa tweaking di hujung saya untuk mendapatkannya tepat. Apa yang berlaku ialah makanan yang bermula dari Pac-Man pada kelegapan penuh, kemudian slaid lebih dekat kepadanya menggunakan Transform: TranslateX () untuk bergerak dari kiri ke kanan dan hilang dengan kelegapan sifar. Kemudian ia bersedia untuk berjalan tanpa henti sehingga dia makan sepanjang hari, setiap hari!
Itu bungkus! Sukar untuk mengambil perkara-perkara kecil seperti ini dan melihat bagaimana HTML dan CSS boleh digunakan untuk mencipta semula mereka. Saya ingin melihat Pac-Man anda sendiri (atau Cik Pac-Man!). Kongsi dalam komen!
Atas ialah kandungan terperinci Pac-man ... dalam CSS!. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Alat AI Hot

Undress AI Tool
Gambar buka pakaian secara percuma

Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Clothoff.io
Penyingkiran pakaian AI

Video Face Swap
Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!

Artikel Panas

Alat panas

Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6
Alat pembangunan web visual

SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Terdapat tiga cara untuk membuat pemutar pemuatan CSS: 1. Gunakan pemutar asas sempadan untuk mencapai animasi mudah melalui HTML dan CSS; 2. Gunakan pemutar tersuai pelbagai mata untuk mencapai kesan lompat melalui masa kelewatan yang berlainan; 3. Tambahkan pemutar dalam butang dan beralih kelas melalui JavaScript untuk memaparkan status pemuatan. Setiap pendekatan menekankan pentingnya butiran reka bentuk seperti warna, saiz, kebolehcapaian dan pengoptimuman prestasi untuk meningkatkan pengalaman pengguna.

Untuk menangani keserasian pelayar CSS dan isu awalan, anda perlu memahami perbezaan sokongan penyemak imbas dan menggunakan awalan vendor dengan munasabah. 1. Memahami masalah biasa seperti Flexbox dan sokongan grid, kedudukan: prestasi tidak sah, dan prestasi animasi adalah berbeza; 2. Periksa status sokongan ciri CANIUSE Ciri; 3. Gunakan dengan betul -webkit-, -moz-, -ms-, -o- dan awalan pengeluar lain; 4. Adalah disyorkan untuk menggunakan autoprefixer untuk menambah awalan secara automatik; 5. Pasang postcss dan konfigurasi penyemak imbas untuk menentukan penyemak imbas sasaran; 6. Secara automatik mengendalikan keserasian semasa pembinaan; 7. Ciri -ciri pengesanan moden boleh digunakan untuk projek lama; 8. Tidak perlu meneruskan konsistensi semua pelayar,

Themaindifferencesbetweendisplay: inline, block, andinline-blockinhtml/cssarelayoutbehavior, spaceusage, andstylingcontrol.1.inlineelementsflowwithtext, notstartonNewlines, abaikanwidth/height, andonyapplylylylylylinddding/

Menetapkan gaya pautan yang telah anda lawati dapat meningkatkan pengalaman pengguna, terutama di laman web yang berintensifkan kandungan untuk membantu pengguna menavigasi lebih baik. 1. Gunakan CSS: Kelas pseudo yang dilawati untuk menentukan gaya pautan yang dikunjungi, seperti perubahan warna; 2. Perhatikan bahawa penyemak imbas hanya membenarkan pengubahsuaian beberapa atribut disebabkan oleh sekatan privasi; 3. Pemilihan warna harus diselaraskan dengan gaya keseluruhan untuk mengelakkan ketangkasan; 4. Terminal mudah alih mungkin tidak memaparkan kesan ini, dan disyorkan untuk menggabungkannya dengan arahan visual lain seperti logo tambahan ikon.

Gunakan atribut clip-path CSS untuk menanam unsur-unsur ke dalam bentuk tersuai, seperti segitiga, takik bulat, poligon, dan lain-lain, tanpa bergantung pada gambar atau SVG. Kelebihannya termasuk: 1. Menyokong pelbagai bentuk asas seperti Circle, Ellipse, Polygon, dan lain -lain; 2. Pelarasan responsif dan boleh disesuaikan dengan terminal mudah alih; 3. Mudah untuk animasi, dan boleh digabungkan dengan hover atau javascript untuk mencapai kesan dinamik; 4. Ia tidak menjejaskan aliran susun atur, dan hanya tanaman kawasan paparan. Penggunaan umum adalah seperti laluan klip bulat: bulatan (50pxatcenter) dan triangle clip-path: polygon (50%0%, 100 0%, 0 0%). Notis

Untuk membuat imej responsif menggunakan CSS, ia boleh dicapai terutamanya melalui kaedah berikut: 1. Gunakan maksimum lebar: 100% dan ketinggian: auto untuk membolehkan imej menyesuaikan diri dengan lebar kontena sambil mengekalkan perkadaran; 2. Gunakan atribut SRCSET dan saiz HTML dengan bijak memuatkan sumber imej yang disesuaikan dengan skrin yang berbeza; 3. Gunakan objek-sesuai dan kedudukan objek untuk mengawal penanaman imej dan paparan fokus. Bersama -sama, kaedah ini memastikan bahawa imej dibentangkan dengan jelas dan indah pada peranti yang berbeza.

Pilihan unit CSS bergantung kepada keperluan reka bentuk dan keperluan responsif. 1.PX digunakan untuk saiz tetap, sesuai untuk kawalan yang tepat tetapi kekurangan keanjalan; 2.EM adalah unit relatif, yang mudah disebabkan oleh pengaruh unsur induk, sementara REM lebih stabil berdasarkan unsur akar dan sesuai untuk skala global; 3.VW/VH didasarkan pada saiz viewport, sesuai untuk reka bentuk yang responsif, tetapi perhatian harus dibayar kepada prestasi di bawah skrin yang melampau; 4. Apabila memilih, ia harus ditentukan berdasarkan sama ada pelarasan responsif, hubungan hierarki elemen dan ketergantungan viewport. Penggunaan yang munasabah boleh meningkatkan fleksibiliti dan penyelenggaraan susun atur.

Penyemak imbas yang berbeza mempunyai perbezaan dalam parsing CSS, mengakibatkan kesan paparan yang tidak konsisten, terutamanya termasuk perbezaan gaya lalai, kaedah pengiraan model kotak, flexbox dan tahap sokongan susun atur grid, dan tingkah laku yang tidak konsisten bagi atribut CSS tertentu. 1. Pemprosesan gaya lalai tidak konsisten. Penyelesaiannya adalah menggunakan cssreset atau normalisasi.css untuk menyatukan gaya awal; 2. Kaedah pengiraan model kotak versi lama IE adalah berbeza. Adalah disyorkan untuk menggunakan kotak-kotak: kotak sempadan dengan cara yang bersatu; 3. Flexbox dan grid melakukan secara berbeza dalam kes kelebihan atau dalam versi lama. Lebih banyak ujian dan gunakan autoprefixer; 4. Beberapa tingkah laku atribut CSS tidak konsisten. CANIUSE mesti dirujuk dan diturunkan.
