怎么在css中实现一个评分星星效果

本篇文章为大家展示了怎么在css中实现一个评分星星效果，内容简明扼要并且容易理解，绝对能使你眼前一亮，通过这篇文章的详细介绍希望你能有所收获。

创新互联建站专注于应城网站建设服务及定制，我们拥有丰富的企业做网站经验。热诚为您提供应城营销型网站建设，应城网站制作、应城网页设计、应城网站官网定制、小程序设计服务，打造应城网络公司原创品牌,更为您提供应城网站排名全网营销落地服务。

结构如下:

怎么在css中实现一个评分星星效果

很简单的结构，主要核心代码如下：

对应效果，直接来看结构模型比较清晰：

怎么在css中实现一个评分星星效果

如图，

其中 div.grade-star-gradual 负责灰色的背景条，

span.progress负责彩色的进度条

Div.grade-progress-bg负责包裹二者，并和右侧100%文案排列对齐用。

利用 span.progress的百分比宽度占据灰色条的比例来模拟数据的百分比。就显得格外简单了。

彩色星星的实现：

利用这个思路，其实彩色进度条和彩色星星进度条就是差星星（这也是一句废话）

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

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

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

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

比如这样的：

怎么在css中实现一个评分星星效果

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

怎么在css中实现一个评分星星效果

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

怎么在css中实现一个评分星星效果

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

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

怎么在css中实现一个评分星星效果

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

怎么在css中实现一个评分星星效果

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

.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; }

怎么在css中实现一个评分星星效果

其他资讯