进阶篇之纯css+字体实现五角星（半颗星）评分

时间：2021-12-15 00:08:06

1.前言 
之前写了一篇实现五角星打分效果的demo。这个demo用来实现打分效果绰绰有余，那么有时候我们在统计评分的时候，就会有半颗星或者1/3颗星星这样的那要如何实现呢？来来来，纯字体+css实现！ 
2.详情 
1.下载字体 webFontIcon 我不会把压缩文件上传，会的童鞋可以教教我，感谢赐教，这样我就可以把字体上传以供大家下载了。 
2.css样式

        .cleanfloat::after{display: block; clear: both; content:""; visibility: hidden; height:;}

        *{margin:; padding:;}

        /*字体路径按照你的路径去修改*/

         @font-face {

            font-family: 'AlluraRegular';

            src: url('../common/webFontIcon/websymbols/fonts/websymbols-regular-webfont.eot'),

                 url('../common/webFontIcon/websymbols/fonts/websymbols-regular-webfont?#iefix') format('embedded-opentype'),

                 url('../common/webFontIcon/websymbols/fonts/websymbols-regular-webfont.woff') format('woff'),

                 url('../common/webFontIcon/websymbols/fonts/websymbols-regular-webfont.ttf') format('truetype'),

                 url('../common/webFontIcon/websymbols/fonts/websymbols-regular-webfont.svg#AlluraRegular') format('svg');

        }

        .starFive span {display: block;float: left;font-size: 25px; font-family: 'AlluraRegular';

            text-align: center;color: #888;width: 27px;height: 33px;line-height: 33px;

            margin-right: 5px;position: relative;overflow: hidden;white-space: pre;

         }

        .starFive span:before {position: absolute;

            left:;top:;display: block;width: 50%;

            content: attr(data-content);overflow: hidden;color: #F63;

        }

        .sF1 span:before{width: 70%;}

        .sF2 span:before{width: 50%;}

        .sF3 span:before{width: 40%;}

        .starFive .org_star {color: #F63;}

        .starFive b {font-weight: normal; line-height: 40px;

            font-size: 25px;color: #888;margin-left: 10px;

        }

3.html内容

<div>

      <p class='cleanfloat starFive sF1'><span class='org_star'>R</span><span class='org_star'>R</span><span class='org_star'>R</span><span class='org_star'>R</span><span data-content='R'>R</span><b>4.7分</b></p>

      <p class='cleanfloat starFive sF2'><span class='org_star'>R</span><span class='org_star'>R</span><span class='org_star'>R</span><span data-content='R'>R</span><span>R</span><b>3.5分</b></p>

      <p class='cleanfloat starFive sF3'><span class='org_star'>R</span><span class='org_star'>R</span><span data-content='R'>R</span><span>R</span><span>R</span><b>2.4分</b></p>

 </div>

4.效果展示

进阶篇之纯css+字体实现五角星（半颗星）评分

3.总结 
这个IE8及以上等其他高版本浏览器都是支持的。是不是很实用的打分？如果是做数据查询的时候，显示这样的打分，就可以用到了。如果觉得哪里需要改进的，还请多多赐教。学无止境，我希望得到大家的批评，才会有进步。一个人孤军奋战，感觉进步的慢。

相关文章