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.效果展示

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

进阶篇之纯css+字体实现五角星(半颗星)评分的更多相关文章

  1. css实现半颗星评分效果

    效果如下: html代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&q ...

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

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

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

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

  4. 7中漂亮的纯css字体

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  5. 20.纯 CSS 为母亲节创作一颗像素画风格的爱心

    原文地址:https://segmentfault.com/a/1190000014837536 感想: 网格grid 又来了: fr : (剩余空间长度)单位, 1.当(50px,nfr),nfr代 ...

  6. 如何用纯 CSS 为母亲节创作一颗像素画风格的爱心

    效果预览 在线演示 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/LmrZVX 可交互视频教 ...

  7. 前端每日实战:20# 视频演示如何用纯 CSS 为母亲节创作一颗像素画风格的爱心

    效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/LmrZVX 可交互视频教程 此视频 ...

  8. js css div 点亮半颗星星(二)

    上回说到js css点亮星星 换种方式来点亮 <!DOCTYPE html> <html lang="en"> <head> <meta ...

  9. 2. web前端开发分享-css,js进阶篇

    一,css进阶篇: 等css哪些事儿看了两三遍之后,需要对看过的知识综合应用,这时候需要大量的实践经验, 简单的想法:把qq首页全屏另存为jpg然后通过ps工具切图结合css转换成html,有无从下手 ...

随机推荐

  1. Spring AOP拦截对Controller的请求时的配置失败

    简单的说,就是父子容器的问题,将AOP的配置信息放在applicationContext.xml中,该配置文件被ContextLoaderListener加载,Spring会创建一个WebApplic ...

  2. LoadRunner11_录制Oracle数据库脚本

    [oracle环境] ①oracle:无需在本地安装oracle,但是oracle的odbc驱动一定要装:(我的安装路径为 D:\oracle ).安装好后在环境变量 " Path &quo ...

  3. webpack vue 配置

    vue-loader 1.)首先创建项目目录 --vue-loader文件夹 |-index.html 入口文件 |-main.js 入口文件 |-App.vue Vue文件 |-package.js ...

  4. ASP.NET MVC5(五):身份验证、授权

    使用Authorize特性进行身份验证 通常情况下,应用程序都是要求用户登录系统之后才能访问某些特定的部分.在ASP.NET MVC中,可以通过使用Authorize特性来实现,甚至可以对整个应用程序 ...

  5. 架构漫谈系列(2) 封装(Encapsulation)

    这是这个系列的第二篇.在第二篇里,我决定讲一讲封装. 程序的不同部分应该用封装去互相隔离,模块之间应该不应该产生很随意的关联. 可能有的人觉得不解,又或觉得是有道理的废话,不急,先一步一步来. 我们先 ...

  6. mysql的my.ini文件详解

    mysql数据库在配置时包含很多信息:端口号,字符编码,指定根路径 basedir,指定数据存放的路径等信息 mysql的字体编码分为两种: 服务器编码 客户端输入的编码 通常服务器的编码都是utf- ...

  7. nginx二级域名配置自动跳转到一级域名

    nginx二级域名配置自动跳转到一级域名 rewrite配置内容: if ($http_host !~ "^www.aaa.com$") { rewrite ^(.*) http: ...

  8. javac不是内部命令和外部命令

    因为系统不能识别javac命令,或者是因为你没有正确安装JDK. 在你的JDK所在的安装目录,在DOS环境里,比如是:C:\java>set path=c:\java1.4.1\bin 然后在c ...

  9. js中的字符替换

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

  10. 第一章(认识jQuery)

    1.3.2编写简单的jQuery代码 ①$是jQuery的简写 ②$("#foo") = $("#foo") ③$.ajax  =  jQuery.ajax ④ ...