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. LoadRunner11_录制Oracle数据库脚本

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

  2. Spring boot 1: 使用IDEA创建Spring boot项目

    项目用到的环境: Windows 10 JDK8 IntelliJ IDEA 2017.1.3 Apache Tomcat 8 Maven 3.3.3 使用IDEA新建spring boot项目 新建 ...

  3. OpenStack(企业私有云)万里长征第三步——调试成功

    一.前言 折腾了一两个月(中间有事耽搁了半个月),至今日基本调试成功OpenStack,现将中间的部分心得记录下来. 二.环境 使用的是devstack newton版.具体部署过程可以参考cloud ...

  4. 【Android Developers Training】 58. 缓存位图

    注:本文翻译自Google官方的Android Developers Training文档,译者技术一般,由于喜爱安卓而产生了翻译的念头,纯属个人兴趣爱好. 原文链接:http://developer ...

  5. 【MUI】百度地图定位功能

    博主最近进行一款APP开发,需要用到定位功能,经过一番折腾,终于搞定,不废话,代码如下 mui.plusReady(function() { var longitude, latitude; //va ...

  6. SDP

    SDP语法 一个SDP描述含有会话级信息和媒体级信息.会话级信息应用于整个会话.例如:它能成为会话始发者或者会话的名字.媒体级信息作用于特殊的媒体流.例如:它能作为一个编码器给音频流编码或者是给视频流 ...

  7. 流行框架angular

    ---恢复内容开始--- 一.angular是什么 一款非常优秀的前端高级js框架,由谷歌团队负责开发 angular是通过新的属性和表达扩展了html angular可以构建一个单一页面应用程序(s ...

  8. 针对双系统ubuntu16.04卡死及系统没有声音解决方法

    楼主电脑系统状况:win10主系统,128固态为ubuntu系统       安装一共为两次. 第一次出现ubuntu安装成功后没有声音,主系统win10有声音,Ubuntu上检测不到声卡,说明ubu ...

  9. Mac之OS系统下搭建JavaEE环境 <一> 之JDK的安装配置

    这篇文章介绍了如何在Mac下搭建我们的JavaEE工作环境,对于初学者来说还是比较通俗易懂的. 一.JDK的安装及配置 1.首先我们到Oracle官网下JDK http://www.oracle.co ...

  10. eclipse打开时提示:failed to create the java virtual machine

    Eclipse打开时提示: failed to create the java virtual machine 原因:C盘空间不够   编辑删除 处理:1.用金山清理临时文件: 2.用金山手机卫士连接 ...