Very nice CSS star effect summary 1th/2 page _ Experience Exchange

Using pure CSS to build star ratings is being used more and more in network Ria, combined with Ajax and other technologies, can render a very good visual effects and a great user experience, before the beginning of this article, we can first go to Cssheaven feel.

Recently, because of the project needs, I found many examples and explanations of CSS star ratings on the internet, but found that most of the articles are translated abroad, and the explanation is not very clear, so I decided to do a summary, but also hope to give you some help.

First write the algorithm for this effect in Chinese:
1. Use the position of the background image to switch to get star effect;



2. The most critical place of the whole effect is the "three Layer theory", the whole effect is divided into three layers--empty stratification, fractional layer and scoring layer, three layer layout is absolute, in order to avoid the UL itself with the relative layout (of course with P can also get the same effect);
3. Empty layering is the background image of the "Empty Star" as a backdrop, and horizontally tiled;
4. The width of the fractional layer is equal to (the fractional * image width) The resulting value, and the background image in the "Fractional Star (yellow in the example)" as the background horizontally tiled;
5. Layering is to place 5 empty links in the position of 5 stars (width to coincide with the background image), and set 5 a:hover background to "score star (here is green)", width set to star number * picture width, left 0 This can be achieved by combining a:hover with different widths, and the vertical coordinates are smaller than the vertical coordinates of a (to ensure that the current a:hover does not obscure the other links);

