css案例 - 评分效果的星星✨外衣
纳尼?什么星星外衣?好,直接上图比较能说清楚:
仔细看会发现规律:可以根据百分比/分值动态改变高亮星星的个数。
分步骤图:
这种效果,如果遇到一分一个星,没有半星(或者有也可以,直接加一个半星的类名)的情况,还可以通过添加多个结构实现。
但是再加上这星星都要渐变效果,我当时差点找设计谈谈去(当然是求人家改成不渐变啊)。
不过真的去的话,显得咱们太不专业了不是,好看的效果都实现不了,还叫什么前端。
乖乖坐下来看设计稿。
这么直接看的话,可能没有思路,不过可以换一种方式来思考:
先想想下边这种效果怎实现的?
怎么样,是不是看了这个,对于星星效果的实现也有了思路了已经?!好,解散。
哈哈,不过没有也没关系,可以先来看一下,这种进度条的实现。然后再从他身上找思路(这就是我开发时的思路了,很笨很“务实”):
结构如下:
很简单的结构,主要核心代码如下:
<div class="grade-progress-bg">
<div class="grade-star-gradual">
<span class="progress" style="width: 50%;"></span>
</div>
</div>
对应效果,直接来看结构模型比较清晰:
如图,
其中div.grade-star-gradual 负责灰色的背景条,
span.progress负责彩色的进度条
Div.grade-progress-bg负责包裹二者,并和右侧100%文案排列对齐用。
利用span.progress的百分比宽度占据灰色条的比例来模拟数据的百分比。就显得格外简单了。
彩色星星的实现:
利用这个思路,其实彩色进度条和彩色星星进度条就是差星星(这也是一句废话)
但关键思路点在于,不要把星星看做是进度条。
也就是说星星评分和一般的进度条效果实现起来一样。唯一的区别是有无星星。
那怎么把普通进度条加上星星呢?我的设计专业还是给了我一丝灵感:
只要在彩色进度条上边覆盖一个镂空的星星图案,看到的不就都是星星了吗?!
比如这样的:
黑色地方都是png透明图,在看图软件就是黑色的
换个软件截图,这样看明白吧,后边得马赛克就是png得透明底
然后实际这个进度条长这样:
披上华丽的外衣后长这样:
是不是感觉又赚了个大便宜!
代码设计上,还是和之前的进度条一样,背景色初始为灰色,星星盖在上边就是五个灰色的小星星
然后当有数据值得时候,改变彩色条span.progress的宽度为百分比即可实现视觉上星星个数的变化
结构上,也和进度条一致,但是为了这个镂空星星的“外衣”,我加了一个空结构做span的弟弟,也可以用一个伪元素随意发挥。
<div class="grade-progress-box">
<div class="grade-star-bg">
<div class="grade-star-gradual">
<span class="progress" style="width: 100%;"></span>
<div class="grade-star-img bgsize"></div>//镂空星星图
</div>
</div>
<div class="grade-number grade-number1">5分</div>
</div>
但要保证这个“外衣要穿着得体”,即裁剪得当,不要露怯为妙。
镂空星星周围的颜色要和进度条周围的融为一体,我这里都是白色,比较好混。
最后展示用的百分比和分输,配合上vue的语法,很简单的就可以绑定展示。
至于从左向右的填充动态效果,只需要简单的使用css 的transition,监听width的改变即可。
2019-04-01 13:03:55补
后来有读者找上门问我,说还是看不明白镂空图得原理,这里我把我俩得截图贴一下,方便大家理解:
感谢这个小伙伴得疑问,补足一下我原来文章描述得不足~
结构:
普通进度条
.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;
}
好了,又搞定了一个。
==============================$_$==================================
2018-10-30 11:45:22 补充:
后来又遇到一个类似的评分星星效果,但是还用这个方法就死活不那么尽如人意了:
首先说不那么令人头痛的设计稿上:
这次与上次不同的是,背景不是纯白色的纯色,而是半透明。
透出来的底色有时候是白色,又时候又是蓝色的话,就不可能还用上一种做法的一个纯背景+镂空图覆盖了。
于是这次我用了两张图叠加,如下图:
底图是默认的灰色星星,然后彩色星星覆盖住灰色的,彩色被包裹在一个div中,控制div的宽度以达到漏出多少彩色星星的效果。
具体结构就是这样:
两个span分别是灰色星星和彩色星星做背景,中间div的宽度根据数据计算伸缩并超出隐藏。加之trasition的动画,一样达到了上边的那种效果。
自测、1.5, 2.5, 3分都完美展示。
好景不长,测试发现1.7、2.3分这样的半块的半块展示不好,
比如:
再比如:
该多了不多,该少了不少,左右不准有没有。
后来觉得是自己星星间距的问题,先说下星星间距和大小的关系:
然后就左右调试星星,出了这么多稿:
后来好不容易这种半块又半块的星搞定了后发现,整星又不行了。我崩溃到一键还原了,没有截图。
实在没办法了,在整星的基础上研究解决方法吧。因为你只有站在好的方向上再努力才会离成功更近:
我发现规律是
在半星的左边,比如1.2、1.3、1.4分就会不够,得出的宽度百分比小于正确展示时的百分比。
而半星的右边,如1.6、1.7、1.8计算出的宽度值又会多于实际应该展示的宽度值。
这种一个计算方式需要处理两种情况的情况,再纯用css就无法解决了。
于是我请除了js大哥出面处理:
var res = parseFloat((Number(this.gradeData[1]) / 5) * 100).toFixed(2);
var decade = parseInt(res / 10); //十位数
var unit = parseInt(res % 10); //个位数
if (unit !== 0) {
if (decade % 2 == 0) {//十位数为偶数
else {//十位数为奇数
计算属性的函数代码:
Sati: function(val) {
// 如果模十得0,表示整数,半星刚好,正常显示
// 如果十位数为偶数 左半颗星星
// 个位数:
// 为2 需要+ 4
// 4 + 3
// 6 + 2
// 8 + 1
// 如果十位数为奇数 右半颗星星
// 个位数:
// 为2 需要- 1
// 4 - 2
// 6 - 3
// 8 - 4
// this.Satisfaction = parseFloat(Number(this.gradeData[1]) / 5 * 100).toFixed(2);
var res = parseFloat((Number(this.gradeData[1]) / 5) * 100).toFixed(2);
var decade = parseInt(res / 10); //十位数
var unit = parseInt(res % 10); //个位数
console.log("原值", res,"十位数", decade, "个位", unit);
if (unit !== 0) {
// 不是正好半颗星或一颗星的情况
// console.log("非半星");
if (decade % 2 == 0) {
//十位数为偶数
// console.log("十位数为偶数");
switch (unit) {
case 2:
unit += 4;
break;
case 4:
unit += 3;
break;
case 6:
unit += 2;
break;
case 8:
unit += 1;
break;
}
} else {
//十位数为奇数
// console.log("十位数为奇数");
switch (unit) {
case 2:
unit -= 1;
break;
case 4:
unit -= 2;
break;
case 6:
unit -= 3;
break;
case 8:
(unit -= 4);
break;
}
}
res = "" + decade + unit;
}
console.log("结果", res);
return res;
}
另外,平时用文字整理自己的思路真的有助于自己写逻辑。
我这个函数的逻辑就是先整理出下边这种现象描述,再照着编程的。使得思路很清晰不会编程的中途迷茫。
这也是在智能社视频中跟着blue老师学到的一招,安利一下智能社。
个人学习理解和总结,很多不足还请指正~
声明:
请尊重博客园原创精神,转载或使用图片请注明:
博主:xing.org1^
出处:http://www.cnblogs.com/padding1015/
最新文章
- Cocos2d-X3.0 刨根问底(四)----- 内存管理源码分析
- spider_getModelInformation
- C语言深度挖掘
- SNMPv3/pygal制图/smtplib发邮件
- 黄聪:说说JSON和JSONP,也许你会豁然开朗(转)
- 无边框窗体、用户控件、Timer控件
- JavaScript 3D图表
- java学习之路---线程(重点)
- iOS 更改导航栏返回button文字
- 隱藏在素數規律中的Pi -- BZOJ1041解題報告
- dubbo 用来做什么
- CentOS 服务器添加简易";回收站";
- androidstudio项目如何使用git版本回退
- NOIp2017D2T1(luogu3968) 奶酪 (并查集)
- [xdoj] 1301&;1302 数字计数 数字计数的复仇
- JS中UTF-8和UTF-16互转
- 【BZOJ】【3653】谈笑风生
- Java精选笔记_网络编程
- JS 汉字与Unicode码的相互转化
- .NET反编译之manager,base.AutoScaleMode修复