Very beautiful CSS star effect summary page 1/2_Experience exchange

Using pure CSS to create star rating effects is increasingly being used in online RIA. Combined with ajax and other technologies, it can render excellent visual effects and great user experience. Before this article begins , you can go to cssheaven to experience it first.

Due to project needs recently, I looked for a lot of examples and explanations of CSS star ratings on the Internet, but found that most of them were translated foreign articles and the explanations were not very clear, so I decided I will make a summary myself, and I hope it can give you some help.

First write the algorithm of this effect in Chinese:
1. Use the position switching of the background image to obtain the star effect;


2. The most critical part of the entire effect is the "three-layer theory". The entire effect is divided into three layers - empty layer, fractional layer and scored layer. The layout of the three layers are absolute to avoid ul itself from automatically The relative layout of the band (of course you can also use p to get the same effect);
3. Empty layering is to use the "empty star" in the background image as the background and tile it horizontally;
4. Fractional layering The width is equal to the value obtained by (score * image width), and the "score star (yellow in the example)" in the background image is used as the background to tile horizontally;
5. Layering is to tile 5 empty links Place it at the position of 5 stars (the width should match the background image), and set the background of the 5 a:hover to "scoring stars (green here)", set the width to the number of stars * image width, and left to 0 (to the left, so that the scoring effect can appear when combined with the different widths of a:hover), the vertical coordinate is smaller than the vertical coordinate of a (to ensure that the current a:hover does not block other links);