纳尼？甚么星星外衣？好，立即上图较为能说清晰：
细心看会发现规律性：能够依据百分比/分值动态性更改高亮度星星的个数。
分流程图：
这类实际效果，假如遇到1分1个星，沒有半星（或有还可以，立即加1个半星的类名）的状况，还能够根据加上好几个构造完成。
可是再再加这星星都要渐变色实际效果，我那时候差点儿找设计方案谈谈去（自然是求人家改为不渐变色啊）。
但是真的去的话，显得我们太不技术专业了并不是，漂亮的实际效果都完成不上，还叫甚么前端开发。
乖乖坐下看来设计方案稿。
这么立即看的话，将会沒有思路，但是能够换1种方法来思索：
先想一想下边这类实际效果怎完成的？
如何，是否看了这个，针对星星实际效果的完成也是有了思路了早已？！好，散伙。
哈哈，但是沒有也没事儿，能够先看来1下， 这类进度条的完成。随后再从他身上找思路 （这便是我开发设计时的思路了，很笨很“实干”）：
构造以下:
很简易的构造，关键关键编码以下：
<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负责包裹2者，并和右边100%创意文案排序对齐用。
运用 span.progress的百分比宽度占有灰色条的占比来仿真模拟数据信息的百分比 。就显得分外简易了。
五颜六色星星的完成 ：
运用这个思路，实际上五颜六色进度条和五颜六色星星进度条便是差星星 （这也是1句空话）
但重要思路点在于， 不必 把星星看作是进度条 。
也便是说星星评分和1般的进度条实际效果完成起来1样。唯1的差别是有没有星星。
那如何把一般进度条再加星星呢？我的设计方案技术专业還是给了我1丝设计灵感：
要是在五颜六色进度条上边遮盖1个镂空的星星图案设计，看到的不就全是星星了吗？！
例如这样的：
随后具体这个进度条长这样：
披上绮丽的外衣后长这样：
是否觉得又赚了个大划算！
编码设计方案上，還是和以前的进度条1样，情况色原始为灰色，星星盖在上边便是5个灰色的小编星
随后当了解据值得情况下， 更改五颜六色条 span.progress的宽度为百分比便可完成视觉效果上星星个数的转变
构造上，也和进度条1致，可是以便这个镂空星星的 “外衣”，我加了1个空构造做span的弟弟，还可以用1个伪类随便充分发挥。
<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>
但要确保这个 “外衣要衣着得体”，即剪裁恰当，不必露怯为妙。
镂空星星周边的色调要和进度条周边的融为1体，我这里全是白色，较为好混。
最终 展现用的百分比 和分输，相互配合上 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;
}
好了，又搞定了1个。
以上便是本文的所有內容，期待对大伙儿的学习培训有一定的协助，也期待大伙儿多多适用脚本制作之家。
Copyright © 2002-2020 抠图软件电脑版_在线图片加水印_在线 抠图_在线画图网站_淘宝做图片用什么软件好 版权所有 （网站地图） 粤ICP备10235580号