Tip: CSS Star effect summary

css| Tips

With pure CSS to create star rating effect is increasingly used in the network Ria, combined with Ajax technology, can render a very good visual effects and great user experience, before this article began, we can first go to Cssheaven feel.

Recently because of the project needs, I found a lot of CSS star rating on the internet examples and instructions, but found that most of the articles are translated abroad, and explain is not very clear, so I decided to do a summary of their own, but also hope to give you some help.

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

2. The whole effect of the most critical place is "three-layer theory", the entire effect is divided into three layers--empty layer, fractional layer and scoring layer, three-storey layout is absolute, to avoid the UL itself with the relative layout (of course, with DIV can also achieve the same effect);
3. Empty layering is to use the background image of "empty Star" as the background, and tile horizontally;
4. The width of the fractional layer is equal to the value obtained by the (score * picture width) and is tiled horizontally using the "fractional Star (yellow in example)" in the background image;
5. Playing a hierarchy is to place 5 empty links in the 5-star position (width to match the background picture) and set the 5 a:hover background to "Point Star (here is green)", with a width of stars * Picture width, left 0 This combines a:hover different widths to show the scoring effect, and the vertical coordinates are less than the vertical coordinates of a (to ensure that the current a:hover does not block other links);

Perhaps the above text you look a bit jerky, no relationship, let us combine CSS code to see the solution

<ul class= "Star-rating" >
<li class= "current-rating" >currently 3.5/5 stars.</li>
<li><a href= "#" title= "1 star out of 5" class= "One-star" >1</a></li>
<li><a href= "#" title= "2 stars out of 5" class= "Two-stars" >2</a></li>
<li><a href= "#" title= "3 stars out of 5" class= "Three-stars" >3</a></li>
<li><a href= "#" title= "4 stars out of 5" class= "Four-stars" >4</a></li>
<li><a href= "#" title= "5 stars out of 5" class= "Five-stars" >5</a></li>
</ul>

<style>
. star-rating{/* here is an empty layer, used to show the empty stars.
List-style:none;
margin:0px;
padding:0px;
width:150px;
height:30px;
position:relative;
Background:url (star_rating2.gif) top left repeat-x;/* the empty star is located at the upper level of the background image, setting it to the background and tile horizontally.
}
. star-rating li{/* Set the floating properties of Li * *
padding:0px;
margin:0px;
/*\*/
Float:left;
/* */
}
. star-rating Li a{/* set A's layout to absolute layout and vertical coordinates and hide the text in a to make it an empty link.
Display:block;
width:30px;
height:30px;
Text-decoration:none;
Text-indent: -9000px;
z-index:20;
Position:absolute;
padding:0px;
}
. star-rating Li a:hover{/* set a:hover background picture for the scoring star/vertical coordinates/left is 0, note that the vertical coordinates must be less than the vertical coordinates of a
Background:url (star_rating2.gif) left center;
Z-index:2;
left:0px;
}

/* The following 5 classes are used to set the location of the 5 links and the width of the hover * *
. star-rating a.one-star{
left:0px;
}
. star-rating a.one-star:hover{
width:30px;
}
. star-rating a.two-stars{
left:30px;
}
. star-rating a.two-stars:hover{
width:60px;
}
. star-rating a.three-stars{
left:60px;
}
. star-rating a.three-stars:hover{
width:90px;
}
. star-rating a.four-stars{
left:90px;
}
. star-rating a.four-stars:hover{
width:120px;
}
. star-rating a.five-stars{
left:120px;
}
. star-rating a.five-stars:hover{
width:150px;
}

. star-rating li.current-rating{/* sets the background and width of the fractional layer and hides the text * *
Background:url (star_rating2.gif) left bottom;
Position:absolute;
height:30px;
width:105px;
Display:block;
Text-indent: -9000px;
Z-index:1;
}
</style>

After reading these, I believe you should understand the principle of it, if you still do not understand can give me a message, perhaps my article is not good enough to write: