Home >Web Front-end >CSS Tutorial >Share an example code for implementing a five-star rating using pure CSS
CSSGAMES: Pure CSS achieves five-star evaluation effect. Interested friends can take a look.
Uploaded code:
<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>
It feels pretty good.
【Related Recommendations】
1. Special Recommendation:"php Programmer Toolbox" V0.1 version Download
2. Free css online video tutorial
3. php.cn Dugu Jiujian (2)-css video tutorial
The above is the detailed content of Share an example code for implementing a five-star rating using pure CSS. For more information, please follow other related articles on the PHP Chinese website!