非常漂亮的css星效果总结第1/2页

纯css打造的星级效果在网络RIA中越来越多的被使用。结合ajax等技术，可以呈现出色的视觉效果和出色的用户体验。在这篇文章开始之前，你可以去CSS天堂感受一下。最近因为项目的需要，在网上找到了很多css星级的例子和解释，但是发现大部分都是从国外文章翻译过来的，解释也不是很清楚，所以决定自己总结一下，希望能给大家一些帮助。首先，用中文写下这个效果的算法：1。使用背景图片的位置开关，获得明星效果；

2.整个效果的关键点是“三层理论”。整个效果分为三层：——空层、分数层、播放层。三层的布局是绝对的，避免了ul本身的相对布局(当然通过div也可以得到同样的效果)；3.空分层是用背景图中的“空星”作为背景，水平平铺；4.评分层的宽度等于(评分*图片宽度)得到的值，背景图片中的“评分星(示例中为黄色)”作为水平平铺的背景；5.分层就是在5颗星的位置放5个空链接(宽度要和背景图片一致)，将5 A: Hover的背景设置为“打分星(此处为绿色)”，宽度为星星数*图片宽度，左边为0(向左，这样结合A: Hover的不同宽度可以达到打分效果)，垂直坐标小于A的垂直坐标(保证当前A: Hover)。阅读下一页的全文。