使用CSS绘制星级评分效果的方法

CSS Code

CSS Code复制内容到剪贴板

.rating {   
    width: 124px;   
    height: 19px;   
    margin: 0 0 20px 0;   
    padding: 0;   
    list-style: none;   
    clear: both;   
    position: relative;   
    background: url(http://www.zjgsq.com/wp-content/uploads/2014/09/stars.png) no-repeat 0 0;   
}   
.nostar {   
    background-position: 0 0   
}   
.onestar {   
    background-position: 0 -19px  
}   
.twostar {   
    background-position: 0 -38px  
}   
.threestar {   
    background-position: 0 -57px  
}   
.fourstar {   
    background-position: 0 -76px  
}   
.fivestar {   
    background-position: 0 -95px  
}   
ul.rating li {   
    cursor: pointer;   
    float: left;   
    text-indent: -999em;   
}   
ul.rating li a {   
    position: absolute;   
    left: 0;   
    top: 0;   
    width: 25px;   
    height: 19px;   
    text-decoration: none;   
    z-index: 200;   
}   
ul.rating li.one a {   
    left: 0   
}   
ul.rating li.two a {   
    left: 25px;   
}   
ul.rating li.three a {   
    left: 50px;   
}   
ul.rating li.four a {   
    left: 75px;   
}   
ul.rating li.five a {   
    left: 100px;