Very beautiful CSS star effect summary page 1/2

Creating star rating effects with pure CSS is increasingly used in the network Ria. Combined with Ajax and other technologies, it can render Excellent visual effects and excellent user experience. In this article ArticleBefore getting started, you can try cssheaven first.

Recently, due to project requirements, I have found many examples and descriptions of CSS star rating on the Internet, but I found that most of them are translated from foreign articles, and the explanation is not very clear, so I decided to make a summary by myself and hope to help you.

First, write this effect in Chinese.Algorithm:
1. Use the location switch of the background image to get the star effect;

2. the most important part of the overall effect is the "three-layer theory". The whole effect is divided into three layers: The air separation layer, the score layer, and the score layer. The three layers are all in absolute, to avoid the relative layout of UL itself (of course, div can also achieve the same effect );
3. the blank layer uses the "Empty Star" in the background image as the background and tiled horizontally;
4. The width of the score layer is equal to the value (score * image width), and the "score Star (yellow in this example)" in the background image is used as the horizontal Tile of the background;
5. in the scoring layer, five blank links are placed at the positions of five stars (the width must be consistent with the background image), and five: hover's background is set to "score Star (green here)", width is set to number of stars * image width, left is 0 (left, combined with: if the width of hover is different, the score is displayed. The vertical coordinate is smaller than the vertical coordinate of A (to ensure that the current A: hover does not block other links );