基于 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字体图标 我们的需求中,很多时候会看到一些小的图形,或者叫图标,比如天猫网站中: ...
随机推荐
- [SQL类] SQL优化大全(推荐)
概要 优化的理由 1. 大小写对SQL语句的影响(ORACLE) 2. 尽量使用(NOT) EXISTS 替代( NOT)IN这样的操作 3. 在海量查询时尽量少用格式转换 4. 查询海量数据是,可以 ...
- node.js+express+jade系列一:session的使用
此出只介绍内存session的配置好使用 1:打开app.js文件,添加下面红色内容,一定要注意位置在router前面 app.use(express.methodOverride()); sessi ...
- 六 Django框架,models.py模块,数据库操作——链表结构,一对多、一对一、多对多
链表操作 链表,就是一张表的外键字段,连接另外一张表的主键字段 一对多 models.ForeignKey()外键字段一对多,值是要外键的表类 from __future__ import unico ...
- Selenium-几种等待方式
强制等待 一直使用的time.sleep(5),可以放在任意地方,不好的地方,不太准确确定时间 隐形等待 driver.implicitly_wait(5) 设置了一个最长等待时间,如果在规定时间内网 ...
- 百度编辑器ueditor的toolbars的各个元素代表的功能说明
百度编辑器ueditor的toolbars的各个元素代表的功能说明
- codeforces 710C C. Magic Odd Square(构造)
题目链接: C. Magic Odd Square Find an n × n matrix with different numbers from 1 to n2, so the sum in ea ...
- Gym - 100513K :Treeland (按距离还原一棵树)
题意:一个顶点数为N的生成树,对于每个点i,我们按照与i的距离给出顺序,即dis i 1<=dis i 2<=dis i 3<=...,现在让你输出N-1条边,即还原这棵树. 思路: ...
- redisCheckMem脚本
最近维护的redis cluster需要扫描每个实例的内存使用率,首先我们需要获取实例已经使用的内存,获取实例的最大内存配额,两个值相比就能获取到内存使用比例. 实例的最大内存获取方法: $REDIS ...
- 1057 Stack (30)(30 分)
Stack is one of the most fundamental data structures, which is based on the principle of Last In Fir ...
- L2-016 愿天下有情人都是失散多年的兄妹(25 分)
呵呵.大家都知道五服以内不得通婚,即两个人最近的共同祖先如果在五代以内(即本人.父母.祖父母.曾祖父母.高祖父母)则不可通婚.本题就请你帮助一对有情人判断一下,他们究竟是否可以成婚? 输入格式: 输入 ...