Teilen Sie einen Beispielcode für die Implementierung einer Fünf-Sterne-Bewertung mit reinem CSS

CSSGAMES: Pure CSS erzielt einen Fünf-Sterne-Bewertungseffekt. Interessierte Freunde können einen Blick darauf werfen.

Laden Sie den Code hoch:

<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>

Es fühlt sich ziemlich gut an.

【Verwandte Empfehlungen】

1. Besondere Empfehlung: Version „php Programmer Toolbox“ V0.1 herunterladen

2. Kostenloses CSS-Online-Video-Tutorial

3. php.cn Dugu Jiujian (2) - CSS-Video-Tutorial

Das obige ist der detaillierte Inhalt vonTeilen Sie einen Beispielcode für die Implementierung einer Fünf-Sterne-Bewertung mit reinem CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!