Muka surat ringkasan kesan bintang CSS yang sangat cantik 1/2_Pertukaran pengalaman

Menggunakan CSS tulen untuk mencipta kesan penarafan bintang semakin digunakan dalam RIA dalam talian Digabungkan dengan ajax dan teknologi lain, ia boleh menghasilkan kesan visual yang sangat baik dan pengalaman pengguna yang hebat sebelum artikel ini bermula , anda boleh pergi ke cssheaven untuk mengalaminya pertama.

Baru-baru ini, disebabkan keperluan projek, saya dapati banyak contoh dan penjelasan tentang penarafan bintang CSS di Internet, tetapi saya mendapati kebanyakannya telah diterjemahkan artikel asing, dan penjelasannya tidak begitu jelas, jadi Saya memutuskan untuk melakukannya sendiri Biar saya membuat ringkasan dan berharap ia dapat membantu anda.

Mula-mula tulis algoritma kesan ini dalam bahasa Cina:
1 Gunakan penukaran kedudukan imej latar belakang untuk mendapatkan kesan bintang; 2. Bahagian paling kritikal dari keseluruhan kesan ialah "teori tiga lapisan". Keseluruhan kesan dibahagikan kepada tiga lapisan - lapisan kosong, lapisan pecahan dan lapisan berskor ul itu sendiri ( Sudah tentu, anda juga boleh mendapatkan kesan yang sama dengan p ); Lebar lapisan pecahan adalah sama dengan (pecahan * Lebar gambar), dan gunakan "bintang fraktal (kuning dalam contoh)" dalam imej latar belakang sebagai latar belakang untuk berjubin secara mendatar
5 pautan kosong pada kedudukan 5 bintang (Lebar harus sepadan dengan imej latar belakang), dan tetapkan latar belakang lima a:tuding kepada "bintang rating (hijau di sini)", tetapkan lebar kepada bilangan bintang * lebar gambar, dan kiri ke 0 (ke kiri, digabungkan dengan a: Kesan pemarkahan boleh muncul dengan lebar hover yang berbeza), dan koordinat menegak adalah lebih kecil daripada koordinat menegak a (untuk memastikan bahawa a:hover semasa tidak akan menyekat pautan lain );