效果如下：

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: ;}

        *{margin:; padding:;}

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

         @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: #;width:16px;height:23px;line-height: 23px;

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

         }

        .starFive span:before {position: absolute;

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

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

        }

        .sF1 span:before{width:%;}

        .sF2 span:before{width:%;}

        .sF3 span:before{width:%;}

        .starFive .org_star {color: #F63;}

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

            font-size: 25px;color: #;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>.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>.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>.4分</b></p>

 </div>

</body>

</html>

下载的字体：字体文件下载

css实现半颗星评分效果的更多相关文章

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

    1.前言 之前写了一篇实现五角星打分效果的demo.这个demo用来实现打分效果绰绰有余,那么有时候我们在统计评分的时候,就会有半颗星或者1/3颗星星这样的那要如何实现呢?来来来,纯字体+css实现! ...

  2. css简单实现五角星评分、点赞收藏、展示评分（半颗星、1/3颗星）

    1.前言 之前做的好几个项目中,都会遇到打分,评分,点赞这样的需求,写了很多次,每次需要再写的时候,就会翻出之前写过的代码,然后copy过来.总觉得这样的话没有进步,没有把知识放进脑袋里,所以,自己花 ...

  3. 微信小程序动态评分展示/五角星展示/半颗星展示/自定义长度展示

    一.前言 项目中遇到的评分相关的需求其实还挺多.之前也写过网页中关于评分功能实现的文档.这次,是基于微信小程序开发而提炼出一个简单方便使用的方法,网页开发中同样可用.这次使用的还是字体,主要是字体这个 ...

  4. css案例 - 评分效果的星星✨外衣

    纳尼?什么星星外衣?好,直接上图比较能说清楚: 仔细看会发现规律:可以根据百分比/分值动态改变高亮星星的个数. 分步骤图: 这种效果,如果遇到一分一个星,没有半星(或者有也可以,直接加一个半星的类名) ...

  5. js快速打印一个五分制（五颗星）的评分情况

    1.函数 下面这个函数实现了在html页面中快速打印一个五分制(五颗星)的评分情况: function getRating(rating) { if(rating > 5 || rating & ...

  6. css 实现评分效果

    css实现评分效果,其实是css sprites (css精灵)的延伸应用,效果的实现主要是由  background-position 属性移动图片位置.之前看到有前辈写过关于这方面的内容,在理解上 ...

  7. 纯css实现星级评分效果

    效果 效果图如下,纯css实现超酷炫的星级评分动画效果 ​ 实现思路 5个类型为radio的input,label标签修改样式背景图为星星 label标签给每个星星鼠标停留时加注名字 点击星星有放大旋 ...

  8. JS五星级评分效果(类似与淘宝打分效果)

    今天晚上研究下 五星级评分效果,类似于淘宝后台评分效果,如下图所示: 思路: 当鼠标移到一颗星的时候 判断当前的索引 当前及当前的索引前面的星星亮起来 每当移到任何一颗星星时候 下面跟随提示 mous ...

  9. [JavaScript] js 迅雷评分效果

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"         "http://www ...

随机推荐

  1. mac date 和 Linux date实现从指定时间开始循环

    Linux date begin="2016-01-01" ; i < ; i++ )); do current=$(date -d "$i day $begin& ...

  2. sql server 2008 R2连接失败 错误：18456

    这种问题的解决方法: 第一步:以windows验证模式进入数据库管理器. 第二步:在对新资源管理器中右击实例名称选择属性,弹出服务器属性对话框,我们在左侧栏选择[安全性]选项卡,选中”SQL Serv ...

  3. WordPress 性能优化：为什么我的博客比你的快

    WordPress 很慢? 很多博主都会感觉 WordPress 很慢?作为全世界最常用的建站和博客系统 WordPress 来说,在性能设计上肯定不会有太大的问题,WordPress 开发团队也肯定 ...

  4. Qtp测试中的密码问题

    Qtp中,一般录制的脚本进行回放的时候就会遇到各种各样的问题,导致回放不能顺利进行,比如这次我在录制一个简单的登陆脚本的时候,就遇到了这样的问题: [遇到问题] 1,  录制好的脚本中的密码不能正常输 ...

  5. SGU 261. Discrete Roots

    给定\(p, k, A\),满足\(k, p\)是质数,求 \[x^k \equiv A \mod p\] 不会... upd:3:29 两边取指标,是求 \[k\text{ind}_x\equiv ...

  6. AC日记——Mato的文件管理 bzoj 3289

    3289 思路: 莫队求区间逆序对个数,树状数组维护: 代码: #include <bits/stdc++.h> using namespace std; #define maxn 500 ...

  7. ngx_lua_waf完整安装说明

    测试环境:centos5.6 x32,nginx1.4.4,LuaJIT-2.0.3,ngx_devel_kit-0.2.19.lua-nginx-module-0.9.11,ngx_lua_waf ...

  8. centos定时备份数据库超简单示例

    #mkdir -p /home/db_backup#cd /home/db_backup #vim mysql_backup.shDATE=$(date +%Y%m%d_%H%M%S) /alidat ...

  9. 【SQL】将特定的元素按照自己所需的位置排序

    Oracle中,平时我们排序常用“Order by 列名” 的方式来排序,但是有的时候我们希望这个列中的某些元素排在前面或者后面或者中间的某个位置. 这时我们可以使用Order by case whe ...

  10. python脚本实现ipv6的ddns功能

    话说在国家的推动下,ipv6地址已经开始优先在三大运营商推广,我自己家用的就是联通宽带100M光纤入户.有一次,不经意间发现,我们的光猫竟然获取到了ipv6地址,于是我开始浮想联翩. 说干就干,我先是 ...