css 评分效果的星星示例

  发布时间:2018-07-10 15:53:24   作者:xing.org1^   我要评论
这篇文章主要介绍了css 评分效果的星星示例的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

GPT4.0+Midjourney绘画+国内大模型 会员永久免费使用!
如果你想靠AI翻身,你先需要一个靠谱的工具!

纳尼?什么星星外衣?好,直接上图比较能说清楚:

仔细看会发现规律:可以根据百分比/分值动态改变高亮星星的个数。

分步骤图:

 

这种效果,如果遇到一分一个星,没有半星(或者有也可以,直接加一个半星的类名)的情况,还可以通过添加多个结构实现。

但是再加上这星星都要渐变效果,我当时差点找设计谈谈去(当然是求人家改成不渐变啊)。

不过真的去的话,显得咱们太不专业了不是,好看的效果都实现不了,还叫什么前端。

乖乖坐下来看设计稿。

这么直接看的话,可能没有思路,不过可以换一种方式来思考:

先想想下边这种效果怎实现的?

怎么样,是不是看了这个,对于星星效果的实现也有了思路了已经?!好,解散。

哈哈,不过没有也没关系,可以先来看一下, 这种进度条的实现。然后再从他身上找思路 (这就是我开发时的思路了,很笨很“务实”):

结构如下:

很简单的结构,主要核心代码如下:

1
2
3
4
5
<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的百分比宽度占据灰色条的比例来模拟数据的百分比 。就显得格外简单了。

彩色星星的实现

利用这个思路,其实彩色进度条和彩色星星进度条就是差星星 (这也是一句废话)

但关键思路点在于, 不要 把星星看做是进度条

也就是说星星评分和一般的进度条效果实现起来一样。唯一的区别是有无星星。

那怎么把普通进度条加上星星呢?我的设计专业还是给了我一丝灵感:

只要在彩色进度条上边覆盖一个镂空的星星图案,看到的不就都是星星了吗?!

比如这样的:

然后实际这个进度条长这样:

披上华丽的外衣后长这样:

是不是感觉又赚了个大便宜!

代码设计上,还是和之前的进度条一样,背景色初始为灰色,星星盖在上边就是五个灰色的小星星

 

然后当有数据值得时候, 改变彩色条 span.progress的宽度为百分比即可实现视觉上星星个数的变化

 

结构上,也和进度条一致,但是为了这个镂空星星的 “外衣”,我加了一个空结构做span的弟弟,也可以用一个伪类随意发挥。

1
2
3
4
5
6
7
8
9
<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的改变即可。

普通进度条

1
2
3
4
5
6
7
.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)}}%

样式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
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%);
 
  }

星星进度条

1
2
3
4
5
6
7
8
9
.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}}分

样式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
.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;
 
  }

好了,又搞定了一个。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

蓄力AI

相关文章

  • 如何使用CSS的object-position实现图片在img标签中的定位

    该文章介绍了CSS中的object-position属性,用于精确控制替换元素在容器内的位置,通过指定水平和垂直方向的偏移量,可以实现精准定位
    2024-11-08
  • CSS Grid 布局在 IE 中不兼容的原因及解决方案

    文章主要探讨了CSS Grid布局在Internet Explorer(IE)中的不兼容问题,并提供了具体的解决方案和最佳实践,文章首先介绍了CSS Grid布局的基本概念和与传统布局方法的区别,然
    2024-11-08
  • CSS给div一个带有圆角的渐变边框效果

    本文介绍了CSS实现圆角渐变边框的方法,首先设置元素边框为1像素宽度,样式为实线,颜色为透明,然后设置元素边框圆角为10像素,再设置背景剪裁区域和背景绘制区域为内边距和边
    2024-10-29
  • CSS 布局技巧实现元素左右排列的方法

    在CSS布局中,实现元素左右排列有多种方式,Flex布局通过设置margin-left:auto或margin-right:auto实现元素靠右或靠左排列,Grid布局利用grid-template-columns和justify-self
    2024-10-29
  • CSS中隐藏滚动条的同时保留滚动功能

    在CSS中,隐藏滚动条同时保留滚动功能可以通过设置overflow属性和使用特定的CSS伪元素实现,例如,使用::-webkit-scrollbar针对WebKit浏览器,-ms-overflow-style适用于IE和Edg
    2024-10-29
  • CSS border 边框的全面指南

    本文详细介绍了CSS中的border属性及其相关特性,包括border-width(宽度)、border-style(样式)和border-color(颜色)等,此外,还讲述了如何独立控制元素的四个边的边框,
    2024-10-28
  • CSS实现回到顶部且平滑过渡

    本文主要介绍了在网页开发中如何实现“回到顶部”的功能,通过HTML和CSS的编写,可以实现一个浮动在页面右下角的小图标,点击后即可回到页面顶部,这种设计可以提高网站的可用
    2024-10-28
  • CSS盒子模型、圆角边框、盒子阴影效果实现

    盒子模型是网页布局的基础,包括边框、外边距、内边距和实际内容,通过CSS可以控制盒子之间的距离及其外观,如边框样式、边框颜色等,重要属性包括padding和margin,分别控制内
    2024-10-18
  • CSS盒子模型、圆角边框、盒子阴影效果实现

    盒子模型是网页布局的基础,包括边框、外边距、内边距和实际内容,通过CSS可以控制盒子之间的距离及其外观,如边框样式、边框颜色等,重要属性包括padding和margin,分别控制内
    2024-10-18
  • CSS使用filter和backdrop-filter实现高斯模糊效果(示例代码)

    本文详细介绍了CSS3中的两个实现高斯模糊效果的API:filter和backdrop-filter,filter可以直接在图像或背景图上添加多种效果,而backdrop-filter则用于在元素后的区域添加效
    2024-09-26

最新评论