分享一个纯CSS实现五星评价的实例代码

CSSGAMES：纯CSS实现五星评价效果，感兴趣的小伙伴们可以来看一下。

上代码：

<style type =“text / css”>
    。容器{
        宽度：250px;
        height：50px;
        位置：亲戚;
        边框：1px纯红色;
    }
    UL {
        保证金：0;
        填充：0;
        位置：绝对
        list-style：none;
        宽度：100％;
        身高：100％;
        溢出：隐藏;
    }
    李{
        z-index：1;
        宽度：20％;
        身高：100％;
        float：left;
        背景：#faf;
        border-radius：50％;
        / * box-shadow：2px red inset; * /
    }
    李：悬停+跨度{
        显示：块;
        z-index：99;
        宽度：500％;
        身高：100％;
        float：left;
        背景：#afa;
    }
    .backer {
        位置：绝对
        宽度：100％;
        身高：100％;
    }
    .backer li {
        背景：＃999;
    }
</样式>

<div class =“container”>
    <div class =“backer”>
        <UL>
            <li> </ li>
            <li> </ li>
            <li> </ li>
            <li> </ li>
            <li> </ li>
        </ UL>
    </ DIV>
    <UL>
        <li class =“li1”> </ li> <span> </ span>
        <li class =“li2”> </ li> <span> </ span>
        <li class =“li3”> </ li> <span> </ span>
        <li class =“li4”> </ li> <span> </ span>
        <li class =“li5”> </ li> <span> </ span>
    </ UL>
</ DIV>
<div>另一个div </ div>

感觉还不错吧。

【相关推荐】

1. 特别推荐：“php程序员工具箱”V0.1版本下载

2. 免费css在线视频教程

3. php.cn独孤九贱（2）－css视频教程

Atas ialah kandungan terperinci 分享一个纯CSS实现五星评价的实例代码. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!