Fork me on GitHub
随笔 - 317  文章 - 1  评论 - 11  阅读 - 27万

css实现半颗星评分效果

效果如下:

 

 

 

 

 

 

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>
复制代码

 

下载的字体:字体文件下载

 

posted on   雨为我停  阅读(1822)  评论(0编辑  收藏  举报
(评论功能已被禁用)
编辑推荐:
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
· 没有源码,如何修改代码逻辑?
· 一个奇形怪状的面试题:Bean中的CHM要不要加volatile?
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
阅读排行:
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 没有源码,如何修改代码逻辑?
· PowerShell开发游戏 · 打蜜蜂
· 在鹅厂做java开发是什么体验
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战
历史上的今天:
2014-09-24 javascript点击图片放大的功能(原生)
2014-09-24 jquery图片播放插件Fancybox(灯箱)
2014-09-24 js制作圆角按钮(兼容谷歌,ie7,ie8)
2014-09-24 css滑动门制作圆角按钮
< 2025年2月 >
26 27 28 29 30 31 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 1
2 3 4 5 6 7 8

点击右上角即可分享
微信分享提示