Sehr schöne CSS-Sterneffekt-Zusammenfassungsseite 1/2_Erfahrungsaustausch

Die Verwendung von reinem CSS zum Erstellen von Sternenbewertungseffekten wird in Online-RIA zunehmend verwendet. In Kombination mit Ajax und anderen Technologien können hervorragende visuelle Effekte und ein großartiges Benutzererlebnis erzielt werden. Bevor dieser Artikel beginnt, können Sie es auf cssheaven ausprobieren Erste.

Kürzlich habe ich aufgrund von Projektanforderungen viele Beispiele und Erklärungen für CSS-Sternebewertungen im Internet gefunden, aber festgestellt, dass es sich bei den meisten davon um übersetzte ausländische Artikel handelte und die Erklärungen nicht sehr klar waren, also habe ich Ich habe beschlossen, es selbst zu tun. Lassen Sie mich eine Zusammenfassung erstellen und hoffen, dass sie Ihnen etwas helfen kann.

Schreiben Sie zunächst den Algorithmus dieses Effekts auf Chinesisch:
1. Verwenden Sie die Positionsumschaltung des Hintergrundbilds, um den Sterneffekt zu erhalten 2. Der kritischste Teil des gesamten Effekts ist die „Drei-Schichten-Theorie“. Der gesamte Effekt ist in drei Schichten unterteilt: leere Schicht, Teilschicht und gepunktete Schicht. Das Layout der drei Schichten ist absolut, um das relative Layout zu vermeiden von ul selbst (Natürlich können Sie den gleichen Effekt auch mit p erzielen);
3. Bei leerer Ebene verwenden Sie den „leeren Stern“ im Hintergrundbild als Hintergrund und kacheln ihn horizontal. Die Breite der Teilebene beträgt (Bruch * Bildbreite) und verwendet den „Fraktalstern (im Beispiel gelb)“ als Hintergrund für die horizontale Kachelung.
5 leere Links an den Positionen von 5 Sternen (die Breite sollte mit dem Hintergrundbild übereinstimmen), und den Hintergrund der fünf a:hover auf „Bewertungssterne (hier grün)“ setzen, die Breite auf die Anzahl der Sterne * Bildbreite setzen, und links auf 0 (nach links, kombiniert mit a: Der Bewertungseffekt kann mit unterschiedlichen Hover-Breiten auftreten) und die vertikale Koordinate ist kleiner als die vertikale Koordinate von a (um sicherzustellen, dass der aktuelle a:hover keine anderen Links blockiert );