基于 bootstrap 字体图标,用纯CSS实现星级评分功能
需要用到的图标
实现原理
关键属性是 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实现星级评分功能的更多相关文章
- 纯css实现星级评分效果
效果 效果图如下,纯css实现超酷炫的星级评分动画效果 实现思路 5个类型为radio的input,label标签修改样式背景图为星星 label标签给每个星星鼠标停留时加注名字 点击星星有放大旋 ...
- bootstrap字体图标在谷歌显示正常,在火狐显示异常的问题
bootstrap字体图标的使用 现在有很多的网站支持字体图标,我所知道的有bootstrap,fontawesome,iconmoon,等等,可能还有其他我并不知道 bootstrap只要你的文件夹 ...
- bootstrap字体图标
bootstrap字体图标 http://v3.bootcss.com/components/ <!DOCTYPE HTML> <html> <head> < ...
- Bootstrap 字体图标、下拉菜单、按钮组
Bootstrap 字体图标(Glyphicons) 需要引入fonts文件夹中的文件,而且该文件夹必须命名为fonts,然后引进css文件,jQuery文件,以及bootstrap的js文件. 用法 ...
- 解决本地Bootstrap字体图标不可见的问题
原文:https://www.jianshu.com/p/70ac459d33e7 作为Bootstrap的初学者,我最近遇到了一个问题:在使用Bootstrap字体图标时,图标不可见.使用代码如下: ...
- 用css制作星级评分
Step 1: XHTML <ul class="star-rating"> <li><a href="#" titl ...
- Bootstrap 字体图标(Glyphicons)
http://www.runoob.com/bootstrap/bootstrap-glyphicons.html 什么是字体图标? 字体图标是在 Web 项目中使用的图标字体.虽然,Glyphico ...
- bootstrap 字体图标
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- iconfont字体图标和各种CSS小图标
前言:这是笔者学习之后自己的理解与整理.如果有错误或者疑问的地方,请大家指正,我会持续更新! iconfont字体图标 我们的需求中,很多时候会看到一些小的图形,或者叫图标,比如天猫网站中: ...
随机推荐
- windows目录create、isExsit、remove
RemoveDirectoryA( __in LPCSTR lpPathName ); PathFileExistsA(LPCSTR pszPath); CreateDirectoryA(strDir ...
- AngularJS-Basic(一)
MVC:作为DataModel的$scope 依赖注入DI 模块化Module Service Filter Two way DateBinding Directive Unit Testing&am ...
- FEC之我见一
顾名思义,FEC前向纠错,根据收到的包进行计算获取丢掉的包,而和大神沟通的结果就是 纠错神髓:收到的媒体包+冗余包 >= 原始媒体包数据 直到满足 收到的媒体包+ 冗余包 >= 原始媒 ...
- Arc077_E Guruguru
传送门 题目大意 有$m$个点编号从小到大按照顺时针编成了一个环,有一枚棋子,每次移动可以选择顺时针移动到下一个或者直接移动到编号为$x$的点,现在有$n-1$次数操作,第$i$次要把棋子从第$A_i ...
- Gym 101142 I.Integral Polygons(计算几何)
题意:给定一个凸包,现在让你连接凸包上两点,把凸包变为两个多边形,满足两个多边形的面积都是整数. 思路:我们知道整点的三角形面积S=叉积/2,则S要么是整数,要么是整数+0.5.那么多边形有多个三角形 ...
- 浅谈MVC、MVP、MVVM模式
mvc的模式已经深入人心,想必大家都很熟悉,但是未必都能遵守mvc模式.我们的一个mvc项目比较简单,主要是数据库的查询.一个DBHelp类,封装了数据库的操作,然后Controller中进行中各种查 ...
- tarjian求lca
看了好多dalao的博客,就总结一下啦ovo tarjian算法很是神奇,它的作用是求lca.它是一种离线算法. 在线是指输入一个询问输出一个结果. 离线是将询问一次性输入,一起处理. tarjan它 ...
- 系列文章--突袭HTML5之Javascript
突袭HTML5之Javascript API扩展5 - 其他扩展 突袭HTML5之Javascript API扩展4 - 拖拽 突袭HTML5之Javascript API扩展3 - 本地存储 突袭H ...
- TextBlock截断字符显示为....
添加: TextTrimming="CharacterEllipsis" 到TextBlock中, 即可让TextBlock 支持截断字符显示为...
- NET Remoting 最简单示例
NET Remoting 最简单示例 2014-01-21 15:29 10492人阅读 评论(4) 收藏 举报 分类: .NET(6) 版权声明:本文为博主原创文章,未经博主允许不得转载. 学习 ...