html中评论的星星怎么写,css 评分效果的星星示例
纳尼?什么星星外衣?好,直接上图比较能说清楚:
仔细看会发现规律:可以根据百分比/分值动态改变高亮星星的个数。
分步骤图:
这种效果,如果遇到一分一个星,没有半星(或者有也可以,直接加一个半星的类名)的情况,还可以通过添加多个结构实现。
但是再加上这星星都要渐变效果,我当时差点找设计谈谈去(当然是求人家改成不渐变啊)。
不过真的去的话,显得咱们太不专业了不是,好看的效果都实现不了,还叫什么前端。
乖乖坐下来看设计稿。
这么直接看的话,可能没有思路,不过可以换一种方式来思考:
先想想下边这种效果怎实现的?
怎么样,是不是看了这个,对于星星效果的实现也有了思路了已经?!好,解散。
哈哈,不过没有也没关系,可以先来看一下, 这种进度条的实现。然后再从他身上找思路 (这就是我开发时的思路了,很笨很“务实”):
结构如下:
很简单的结构,主要核心代码如下:
对应效果,直接来看结构模型比较清晰:
如图,
其中 div.grade-star-gradual 负责灰色的背景条,
span.progress负责彩色的进度条
Div.grade-progress-bg负责包裹二者,并和右侧100%文案排列对齐用。
利用 span.progress的百分比宽度占据灰色条的比例来模拟数据的百分比 。就显得格外简单了。
彩色星星的实现 :
利用这个思路,其实彩色进度条和彩色星星进度条就是差星星 (这也是一句废话)
但关键思路点在于, 不要 把星星看做是进度条 。
也就是说星星评分和一般的进度条效果实现起来一样。唯一的区别是有无星星。
那怎么把普通进度条加上星星呢?我的设计专业还是给了我一丝灵感:
只要在彩色进度条上边覆盖一个镂空的星星图案,看到的不就都是星星了吗?!
比如这样的:
然后实际这个进度条长这样:
披上华丽的外衣后长这样:
是不是感觉又赚了个大便宜!
代码设计上,还是和之前的进度条一样,背景色初始为灰色,星星盖在上边就是五个灰色的小星星
然后当有数据值得时候, 改变彩色条 span.progress的宽度为百分比即可实现视觉上星星个数的变化
结构上,也和进度条一致,但是为了这个镂空星星的 “外衣”,我加了一个空结构做span的弟弟,也可以用一个伪类随意发挥。
但要保证这个 “外衣要穿着得体”,即裁剪得当,不要露怯为妙。
镂空星星周围的颜色要和进度条周围的融为一体,我这里都是白色,比较好混。
最后 展示用的百分比和分输,配合上 vue的语法,很简单的就可以绑定展示。
至于 从左向右的填充动态效果 ,只需要简单的使用css 的transition,监听width的改变即可。
普通进度条
.grade-progress-box
.grade-progress-bg
.grade-star-gradual #[span.progress(:style="{width: (Number(DBData.Inv)*100>100?100:Number(DBData.Inv)*100).toFixed(0) + '%'}")]
.grade-number {{(Number(DBData.Inv)*100>100?100:Number(DBData.Inv)*100).toFixed(2)}}%
样式
grade-progress-box:after {
content: "";
display: block;
clear: both;
visibility: hidden;
overflow: hidden;
}
.grade-progress-bg {
display: table-cell;
vertical-align: middle;
width: 4.3rem;
height: .14rem;
overflow: hidden;
}
.grade-star-gradual {
height: 0.16rem;
-webkit-border-radius: .15rem;
border-radius: .15rem;
overflow: hidden;
background: #e5e5e5;
}
.grade-star-gradual span.progress {
width: 0;
height: 100%;
display: block;
-webkit-border-radius: .15rem;
border-radius: .15rem;
-webkit-transition: width 1s ease-out;
-o-transition: width 1s ease-out;
transition: width 1s ease-out;
background: -webkit-gradient(linear, left top, right top, from(#f23f5c), to(#fea94e));
background: -o-linear-gradient(left, #f23f5c, #fea94e 100%);
background: linear-gradient(to right, #f23f5c, #fea94e 100%);
background: -webkit-linear-gradient(left, #f23f5c, #fea94e 100%);
}
星星进度条
.grade-progress-box
.grade-star-bg
.grade-star-gradual #[span.progress(:style="{width: (DBData.Sat/5*100).toFixed(0) + '%'}")]
.grade-star-img
.grade-number.grade-number1 {{DBData.Sat}}分
样式
.grade-star-bg {
position: relative;
display: table-cell;
width: 4.46rem;
height: .5rem;
overflow: hidden;
margin-right: .22rem;
vertical-align: middle;
}
.grade-star-gradual {
height: 0.16rem;
-webkit-border-radius: .15rem;
border-radius: .15rem;
overflow: hidden;
background: #e5e5e5;
}
.grade-star-bg .grade-star-gradual {
height: 100%;
}
.grade-star-img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url(data:image/png;base64,) no-repeat;
-webkit-background-size: 100% 100% !important;
background-size: 100% 100% !important;
}
好了,又搞定了一个。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
html中评论的星星怎么写,css 评分效果的星星示例相关推荐
- css案例 - 评分效果的星星✨外衣
纳尼?什么星星外衣?好,直接上图比较能说清楚: 仔细看会发现规律:可以根据百分比/分值动态改变高亮星星的个数. 分步骤图: 这种效果,如果遇到一分一个星,没有半星(或者有也可以,直接加一个半星的类名) ...
- 超级简单的jQuery纯手写五星评分效果
超级简单的评分功能,分为四个步骤轻松搞定: 第一步: 引入jquery文件:这里我用百度CDN的jquery: <script src="http://apps.bdimg.com/l ...
- html中字体响应式怎么写,css字体单位之间的区分以及字体响应式实现_html/css_WEB-ITnose...
问题场景: 在实现响应式布局的过程中,如何设置字体大小在不同的视窗尺寸以及不同的移动设备的可读性? 需要了解的有: 1.px,em,pt之间的换算关系 1em = 16px 1px = 1/16 em ...
- html中背景不平铺怎么写,css怎么让背景图片不平铺?
在使用background属性设置背景图片时,背景图片默认是重复平铺的.css怎么让背景图片不平铺?下面本篇文章就来给大家介绍一下使用CSS设置背景图片不平铺的方法,希望对大家有所帮助. 在CSS中, ...
- html中写css代码,开发DIV CSS时 先写CSS代码还是先写HTML代码
相信良多LOVE用DIV+CSS技术启示重构网页的爱好者友好,在起源学习DIV+CSS的时分都邑想一个标题,想晓得DIV+CSS妙手或有教育者在开发制作html页面的时刻,下场是先写html照样先写c ...
- 在react项目中编写css,更好的在react项目中写css代码--emotion
简介: emotion是一个JavaScript库,使用emotion可以用写js的方式写css代码.在react中安装emotion后,可以很方便进行css的封装,复用.使用emotion后,浏览器 ...
- vue组件制作专题 - (mpvue专用)在mpvue中纯自己写css实现简单左右轮播
在mpvue中纯自己写css实现简单左右轮播 CSDN:jcLee95 邮箱:291148484@163.com 项目中,在src目录下的components目录下新建一个新文件并重命名为jcmv-c ...
- html中怎么写css代码,html style样式标签元素教程
html标签元素之 时时在构造html时,使用到style标签. 认识与用法教程 一.基本语法 style英文翻译:格式.气概含意 从字面上也不难晓得与CSS款式干系的标签. 完结.标签内放CSS代码 ...
- html中css在哪里写,css可以在html里面写吗
css可以在html里面写,其写法有:1.在head标签的style标签中写css:2.直接在HTML代码里添加style属性,然后在属性里定义css代码即可. 本教程操作环境:windows7系统. ...
- 怎么在html文件中写css文件,html头文件中css怎么写?
html头文件中写css的方法:1.将css的样式代码写在html文档头文件<head></head>中的<style></style>标签中:2.在网 ...
最新文章
- (转)Linux进程调度时机
- Python2的Json反序列化工具
- 使用Nexus搭建Maven私服
- Linux服务器网页显示乱码
- C# 开源一个基于 yarp 的 API 网关 Demo,支持绑定 Kubernetes Service
- rabbitmq可靠性投递_阿里Java研发二面:了解RabbitMQ?说说RabbitMQ可靠性投递
- android git 版本管理,Android版本管理(git 和 repo)
- 神奇的 SQL → 为什么 GROUP BY 之后不能直接引用原表中的列?
- linux里shell中的test代表的意义
- Hadoop系列之OutputCollector
- 10个精美免费PPT模板下载网站推荐
- 扩充C盘空间:分配其他盘剩余空间到C盘
- Unity面试经验(两天面六家,四个offer,济南)
- Selenium2学习(四)-- xpath定位
- 用户购物(数据库)案例
- 【第1天】移动App-学习笔记
- 计算机毕业设计Java公立医院绩效考核系统(源码+系统+mysql数据库+Lw文档)
- [ARC084]E - Finite Encyclopedia of Integer Sequences 乱搞
- 大数据培训:生活中这些场景都用到了大数据
- numpy中ravel()与flatten()的区别