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

 先来看一下CSS绘制五角星的基本方法：

#star-five {

margin: 50px 0;

position: relative;

display: block;

color: red;

width: 0px;

height: 0px;

border-right: 100px solid transparent;

border-bottom: 70px solid red;

border-left: 100px solid transparent;

-moz-transform: rotate(35deg);

-webkit-transform: rotate(35deg);

-ms-transform: rotate(35deg);

-o-transform: rotate(35deg);

}

#star-five:before {

border-bottom: 80px solid red;

border-left: 30px solid transparent;

border-right: 30px solid transparent;

position: absolute;

height: 0;

width: 0;

top: -45px;

left: -65px;

display: block;

content: "";

-webkit-transform: rotate(-35deg);

-moz-transform: rotate(-35deg);

-ms-transform: rotate(-35deg);

-o-transform: rotate(-35deg);

 

}

#star-five:after {

position: absolute;

display: block;

color: red;

top: 3px;

left: -105px;

width: 0px;

height: 0px;

border-right: 100px solid transparent;

border-bottom: 70px solid red;

border-left: 100px solid transparent;

-webkit-transform: rotate(-70deg);

-moz-transform: rotate(-70deg);

-ms-transform: rotate(-70deg);

-o-transform: rotate(-70deg);

content: "";

}

有了这个基础，基本上星级评分的效果就容易实现了：
下图是Demo中会用到的图，可右键另存

HTML Code

<ul class="rating nostar">

<li class="one"><a href="#" title="1 Star">1</a>

</li>

<li class="two"><a href="#" title="2 Stars">2</a>

</li>

<li class="three"><a href="#" title="3 Stars">3</a>

</li>

<li class="four"><a href="#" title="4 Stars">4</a>

</li>

<li class="five"><a href="#" title="5 Stars">5</a>

</li>

</ul>

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-contenthttps://www.56yx.cn/d/file/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;

}

ul.rating li a:hover {

z-index: 2;

width: 125px;

height: 19px;

overflow: hidden;

left: 0;

background: url(http://www.zjgsq.com/wp-contenthttps://www.56yx.cn/d/file/uploads/2014/09/stars.png) no-repeat 0 0

}

ul.rating li.one a:hover {

background-position: 0 -19px;

}

ul.rating li.two a:hover {

background-position: 0 -38px;

}

ul.rating li.three a:hover {

background-position: 0 -57px

}

ul.rating li.four a:hover {

background-position: 0 -76px

}

ul.rating li.five a:hover {

background-position: 0 -95px

}

这样就基本实现了鼠标hover显示对应的星级，后面再增加点JS来实现click效果就可以啦

Demo