Share a pure CSS example code for five-star reviews

Cssgames: pure CSS to achieve five-star evaluation effect, interested in small partners can look.

On the code:

<style type = "Text/css" >    . container {        width: 250px;        height:50px;        Location: relatives;        border: 1px pure red;    }    UL {        margin: 0;        Filling: 0;        Location: Absolute        list-style:none;        Width: 100%;        Height: 100%;        Overflow: hidden;    }    Li {        z-index:1;        Width: 20%;        Height: 100%;        Float:left;        Background: #faf;        border-radius:50%;        /* box-shadow:2px red inset; */    }    Lee: hover + span {        display: block;        z-index:99;        Width: 500%;        Height: 100%;        Float:left;        Background: #afa;    }    . Backer {        Position: Absolute        width: 100%;        Height: 100%;    }    . Backer Li {        background: #999;    } </Style >

<div class = "container" >    <div class = "Backer" >        <UL>            <li> </li>            <li > </li>            <li> </li>            <li> </li>            <li> </li>        </ul>< c8/></div>    <UL>        <li class = "Li1" > </li> <span> </span>        <li class = "Li2" > </li> <span> </span>        <li class = "Li3" > </li> <span> </Spa N>        <li class = "Li4" > </li> <span> </span>        <li class = "Li5" > </li> < span> </span>    </ul></div><div> another DIV </div>

It's a good feeling.

"Recommended"

1. Special recommendation : "PHP Programmer Toolkit" V0.1 version download

2. Free CSS Online video tutorial

3. php.cn (2)-css Video tutorial