五角星评分特效

作者:周星 发布:2017-10-07

    我们经常会看到给某某评分的一个特效,就是原来的5个五角星星都是空心的,当鼠标滑过哪个五角星,那个五角星及之前的五角星就会变亮,给用户的感觉非常直观。如图:

未评分时:


鼠标滑到第三个五角星上时:


今天我们就来学习如何用CSS做这个效果。
首先我们来看整个的html代码:

<ul class="rating nostar">
    <li class="one">1</li>
    <li class="two">2</li>
    <li class="three">3</li>
    <li class="four">4</li>
    <li class="five">5</li>
</ul>

首先我们需要背景图像,如图所示(原图),将它作为ul的背景图像。
在此将这张图片取名为:star-matrix.gif(80 x 176)


整个ul的样式表为
.rating{
    width:80px;
    height:16px;
    list-style:none;
    position:relative;
    background: url(images/star-matrix.gif) no-repeat 0 0;
}
这里的position:relative是个重要代码,以后会用到。
设置height:16是只要第一排的小星星作为背景,默认下是0分。

ul.rating li {
    text-indent:-999em;
    float: left;
    position:absolute;
    left:0;
    top:0;
    width:16px;
    height:16px;
    text-decoration:none;
    z-index: 200;
}
这里的z-index: 200是为了和后面的z-index: 2;比较,使得没被鼠标滑过的区域永远在滑过区域上面。这个是为了触发效果。

ul.rating li.one {left:0}
ul.rating li.two {left:16px;}
ul.rating li.three {left:32px;}
ul.rating li.four {left:48px;}
ul.rating li.five {left:64px;}

ul.rating li:hover {
    z-index:2;
    width:80px;
    height:16px;
    overflow:hidden;
    left:0;
    background: url(images/star-matrix.gif) no-repeat 0 0
}
/*重要样式!! 当鼠标滑过时,换背景图像*/
ul.rating li.one:hover {background-position:0 -96px;}
ul.rating li.two:hover {background-position:0 -112px;}
ul.rating li.three:hover {background-position:0 -128px}
ul.rating li.four:hover {background-position:0 -144px}
ul.rating li.five:hover {background-position:0 -160px}



支付宝扫码赞助博主


评论(0)