css实现半颗星评分效果

最新推荐文章于 2024-02-13 23:50:10 发布

weixin_33966095

最新推荐文章于 2024-02-13 23:50:10 发布

阅读量807

点赞数

CC 4.0 BY-SA版权

文章标签：前端 ViewUI

原文链接：http://www.cnblogs.com/wanliyuan/p/7588566.html

效果如下：

html代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
    .cleanfloat::after{display: block; clear: both; content:""; visibility: hidden; height: 0;}
        *{margin:0; padding:0;}

        /*字体路径按照你的路径去修改*/
         @font-face {
            font-family: 'AlluraRegular';
            src: url('fonts/websymbols-regular-webfont.eot'),
                 url('fonts/websymbols-regular-webfont?#iefix') format('embedded-opentype'), 
                 url('fonts/websymbols-regular-webfont.woff') format('woff'),
                 url('fonts/websymbols-regular-webfont.ttf') format('truetype'),
                 url('fonts/websymbols-regular-webfont.svg#AlluraRegular') format('svg');
        }
         .starFive span {display: block;float: left;font-size: 15px; font-family: 'AlluraRegular';
            text-align: center;color: #888;width:16px;height:23px;line-height: 23px;
            margin-right: 5px;position: relative;overflow: hidden;white-space: pre;
         }
        .starFive span:before {position: absolute;
            left: 0;top: 0;display: block;width: 50%;
            content: attr(data-content);overflow: hidden;color: #F63;
        }
        .sF1 span:before{width:42%;}
        .sF2 span:before{width:96%;}
        .sF3 span:before{width:50%;}
        .starFive .org_star {color: #F63;}
        .starFive b {font-weight: normal; line-height: 40px;
            font-size: 25px;color: #888;margin-left: 10px;
        }
    </style>
</head>
<body>
    <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>
</body>
</html>