点亮星星动态条

这个是评价时点亮星星，当你鼠标在第n颗星悬浮时，就会点亮前面的n颗星。效果如下图：

一、html代码：

<body>
    <ul>
        <li class="star1"></li>
        <li class="star2"></li>
        <li class="star3"></li>
        <li class="star4"></li>
        <li class="star5"></li>    
    </ul>
</body>

二、css样式：

<style type="text/css">
        *{
            margin: 0; 
            padding: 0;
        }
        ul{
            width: 95px;
            position: relative;
            font-size: 0;
            background: url('images/stars.png') 0 -20px;
            height: 19px;
        }
        li{
            position: absolute;
            height: 19px;
            top: 0;
            left: 0;
            list-style-type: none;
            display: inline-block;
        }
        .star1{
            width: 20%;
            z-index: 10;
        }
        .star2{
            width: 40%;
            z-index: 8;
        }
        .star3{
            width: 60%;
            z-index: 6;
        }
        .star4{
            width: 80%;
            z-index: 4;
        }
        .star5{
            width: 100%;
            z-index: 2;
        }
        li:hover{
            background: url('images/laughStar.png') repeat-x;
        }
    </style>

三、原理：

首先 ul 列表的背景就是五颗没点亮的星星， 每一个 li 都是绝对定位，宽度为第n颗星前面的宽度之和，当鼠标悬浮在第n颗星时，就用css更改对应的 li 的背景图片为点亮的星星

posted @ 2014-12-04 16:43  jellyANDjammy  阅读(167)  评论(0)  编辑  收藏  举报