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); //个位数
排除掉整星和整半星的情况（宽度值是整数的：比如10、20、30...100）,直接展示，因为不需要处理。
if (unit !== 0) {
剩下的情况就是，在其他半半星中，判断宽度值的十位数，
十位数为偶数的是半星左边的那种实际宽度值小于应该展示宽度值的情况，我们就让他的实际宽度值再稍微加一点。
if (decade % 2 == 0) {//十位数为偶数
而十位数为奇数的，实际宽度值大于应该展示宽度值，那就让实际宽度值减一点。
else {//十位数为奇数
但是都加或者都减相同的数量吗？当然不是。
仔细观察你又会发现，半星左边个位数的值越小，他需要加的越大，个位数值越大，需要加的却越小。而半星右边更好相反。
总结规律，抽象逻辑。
 
于是我整理到了计算属性中，每次数据返回后，根据分值计算宽度值，再根据宽度值调整到最佳展示值。bug可以关掉了。

计算属性的函数代码：

 1 Sati: function(val) {
 2       // 如果模十得0，表示整数，半星刚好，正常显示
 3       // 如果十位数为偶数 左半颗星星
 4       // 个位数：
 5       // 为2 需要+ 4
 6       //  4 + 3
 7       //  6 + 2
 8       //  8 + 1
 9       // 如果十位数为奇数 右半颗星星
10       // 个位数：
11       //  为2 需要- 1
12       //  4 - 2
13       //  6 - 3
14       //  8 - 4
15       // this.Satisfaction = parseFloat(Number(this.gradeData[1]) / 5 * 100).toFixed(2);
16       var res = parseFloat((Number(this.gradeData[1]) / 5) * 100).toFixed(2);
17       var decade = parseInt(res / 10); //十位数
18       var unit = parseInt(res % 10); //个位数
19       console.log("原值", res,"十位数", decade, "个位", unit);
20       if (unit !== 0) {
21         // 不是正好半颗星或一颗星的情况
22         // console.log("非半星");
23         if (decade % 2 == 0) {
24           //十位数为偶数
25           // console.log("十位数为偶数");
26           switch (unit) {
27             case 2:
28               unit += 4;
29               break;
30             case 4:
31               unit += 3;
32               break;
33             case 6:
34               unit += 2;
35               break;
36             case 8:
37               unit += 1;
38               break;
39           }
40         } else {
41           //十位数为奇数
42           // console.log("十位数为奇数");
43           switch (unit) {
44             case 2:
45               unit -= 1;
46               break;
47             case 4:
48               unit -= 2;
49               break;
50             case 6:
51               unit -= 3;
52               break;
53             case 8:
54               (unit -= 4);
55               break;
56           }
57         }
58         res = "" + decade + unit;
59       }
60       console.log("结果", res);
61       return res;
62     }
View Code

 

另外，平时用文字整理自己的思路真的有助于自己写逻辑。

我这个函数的逻辑就是先整理出下边这种现象描述，再照着编程的。使得思路很清晰不会编程的中途迷茫。

这也是在智能社视频中跟着blue老师学到的一招，安利一下智能社。

 

个人学习理解和总结，很多不足还请指正~

 

声明：

　　请尊重博客园原创精神，转载或使用图片请注明：

　　博主：xing.org1^

　　出处：http://www.cnblogs.com/padding1015/

 

posted @ 2018-07-10 14:46  xing.org1^  阅读(2124)  评论(0)  编辑  收藏  举报