需要用到的图标



实现原理

关键属性是 text-overflow: clip;,表示直接截断文本。我们经常用这个属性的另一个值 text-overflow: ellipsis; 来做省略表示。

先平铺5个空心的图标

再层叠5个实心图标,控制实心图标的宽度来达到截断效果,结合 overflow:hidden 达到类似进度条的效果

优点是因为是字符,颜色大小很容易控制,而且不会影响其他内容

实心图标层的宽度需要根据实际总宽度按比例计算。比如总宽度是字体大小24px的情况下总宽度120,评分4.5(总分5分).实际宽度为 4.5*120/5

代码

<div style="position:relative; font-size: 20px;color:#985f0d;">
<div>
<span class="glyphicon glyphicon-heart-empty" aria-hidden="true"></span><span class="glyphicon glyphicon-heart-empty" aria-hidden="true"></span><span class="glyphicon glyphicon-heart-empty" aria-hidden="true"></span><span class="glyphicon glyphicon-heart-empty" aria-hidden="true"></span><span class="glyphicon glyphicon-heart-empty" aria-hidden="true"></span>
</div>
<div style="position:absolute; left:0;top:0;width: 73px; overflow: hidden;text-overflow: clip;white-space: nowrap;">
<span class="glyphicon glyphicon-heart" aria-hidden="true"></span><span class="glyphicon glyphicon-heart" aria-hidden="true"></span><span class="glyphicon glyphicon-heart" aria-hidden="true"></span><span class="glyphicon glyphicon-heart" aria-hidden="true"></span><span class="glyphicon glyphicon-heart" aria-hidden="true"></span>
</div>
</div>

效果

替换成任意字符

<div style="background: #CECECE; padding:50px;">
<div style="position:relative; font-size: 20px; display: inline-block;">
<div style="font-weight: bold;color:#FFFFFF;">
必须五星好评
</div>
<div style="position:absolute; font-weight: bold; left:0;top:0;width: 73%; overflow: hidden;text-overflow: clip;white-space: nowrap;color:orangered;">
必须五星好评
</div>
</div>
</div>

基于 bootstrap 字体图标,用纯CSS实现星级评分功能的更多相关文章

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

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

  2. bootstrap字体图标在谷歌显示正常,在火狐显示异常的问题

    bootstrap字体图标的使用 现在有很多的网站支持字体图标,我所知道的有bootstrap,fontawesome,iconmoon,等等,可能还有其他我并不知道 bootstrap只要你的文件夹 ...

  3. bootstrap字体图标

    bootstrap字体图标 http://v3.bootcss.com/components/ <!DOCTYPE HTML> <html> <head> < ...

  4. Bootstrap 字体图标、下拉菜单、按钮组

    Bootstrap 字体图标(Glyphicons) 需要引入fonts文件夹中的文件,而且该文件夹必须命名为fonts,然后引进css文件,jQuery文件,以及bootstrap的js文件. 用法 ...

  5. 解决本地Bootstrap字体图标不可见的问题

    原文:https://www.jianshu.com/p/70ac459d33e7 作为Bootstrap的初学者,我最近遇到了一个问题:在使用Bootstrap字体图标时,图标不可见.使用代码如下: ...

  6. 用css制作星级评分

    Step 1: XHTML <ul class="star-rating">       <li><a href="#" titl ...

  7. Bootstrap 字体图标(Glyphicons)

    http://www.runoob.com/bootstrap/bootstrap-glyphicons.html 什么是字体图标? 字体图标是在 Web 项目中使用的图标字体.虽然,Glyphico ...

  8. bootstrap 字体图标

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. iconfont字体图标和各种CSS小图标

    前言:这是笔者学习之后自己的理解与整理.如果有错误或者疑问的地方,请大家指正,我会持续更新! iconfont字体图标 我们的需求中,很多时候会看到一些小的图形,或者叫图标,比如天猫网站中:     ...

随机推荐

  1. windows目录create、isExsit、remove

    RemoveDirectoryA( __in LPCSTR lpPathName ); PathFileExistsA(LPCSTR pszPath); CreateDirectoryA(strDir ...

  2. AngularJS-Basic(一)

    MVC:作为DataModel的$scope 依赖注入DI 模块化Module Service Filter Two way DateBinding Directive Unit Testing&am ...

  3. FEC之我见一

    顾名思义,FEC前向纠错,根据收到的包进行计算获取丢掉的包,而和大神沟通的结果就是 纠错神髓:收到的媒体包+冗余包 >= 原始媒体包数据   直到满足 收到的媒体包+ 冗余包 >= 原始媒 ...

  4. Arc077_E Guruguru

    传送门 题目大意 有$m$个点编号从小到大按照顺时针编成了一个环,有一枚棋子,每次移动可以选择顺时针移动到下一个或者直接移动到编号为$x$的点,现在有$n-1$次数操作,第$i$次要把棋子从第$A_i ...

  5. Gym 101142 I.Integral Polygons(计算几何)

    题意:给定一个凸包,现在让你连接凸包上两点,把凸包变为两个多边形,满足两个多边形的面积都是整数. 思路:我们知道整点的三角形面积S=叉积/2,则S要么是整数,要么是整数+0.5.那么多边形有多个三角形 ...

  6. 浅谈MVC、MVP、MVVM模式

    mvc的模式已经深入人心,想必大家都很熟悉,但是未必都能遵守mvc模式.我们的一个mvc项目比较简单,主要是数据库的查询.一个DBHelp类,封装了数据库的操作,然后Controller中进行中各种查 ...

  7. tarjian求lca

    看了好多dalao的博客,就总结一下啦ovo tarjian算法很是神奇,它的作用是求lca.它是一种离线算法. 在线是指输入一个询问输出一个结果. 离线是将询问一次性输入,一起处理. tarjan它 ...

  8. 系列文章--突袭HTML5之Javascript

    突袭HTML5之Javascript API扩展5 - 其他扩展 突袭HTML5之Javascript API扩展4 - 拖拽 突袭HTML5之Javascript API扩展3 - 本地存储 突袭H ...

  9. TextBlock截断字符显示为....

    添加: TextTrimming="CharacterEllipsis" 到TextBlock中, 即可让TextBlock 支持截断字符显示为...

  10. NET Remoting 最简单示例

    NET Remoting 最简单示例 2014-01-21 15:29 10492人阅读 评论(4) 收藏 举报  分类: .NET(6)  版权声明:本文为博主原创文章,未经博主允许不得转载. 学习 ...