分享一個純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影片教學

#

以上是分享一個純CSS實作五星評估的實例代碼的詳細內容。更多資訊請關注PHP中文網其他相關文章！