您现在的位置是：网站首页> 编程资料编程资料

css 评分效果的星星示例CSS Transition通过改变Height实现展开收起元素从QQtabBar看css命名规范BEM的详细介绍css实现两栏布局，左侧固定宽，右侧自适应的多种方法CSS 实现Chrome标签栏的技巧CSS实现两列布局的N种方法CSS实现隐藏搜索框功能(动画正反向序列)CSS3中Animation实现简单的手指点击动画的示例详解CSS中的特指度和层叠问题详解overflow:hidden的作用(溢出隐藏、清除浮动、解决外边距塌陷)关于CSS浮动与取消浮动的问题

2021-09-04 1068人已围观

简介 这篇文章主要介绍了css 评分效果的星星示例的相关资料，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

纳尼？什么星星外衣？好，直接上图比较能说清楚：

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

分步骤图：

 

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

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

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

乖乖坐下来看设计稿。

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

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

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

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

结构如下:

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

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

 

如图，

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

span.progress负责彩色的进度条

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

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

彩色星星的实现 ：

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

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

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

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

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

比如这样的：

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

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

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

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

 

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

 

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

//镂空星星图 
5分

但要保证这个 “外衣要穿着得体”，即裁剪得当，不要露怯为妙。

镂空星星周围的颜色要和进度条周围的融为一体，我这里都是白色，比较好混。

最后 展示用的百分比 和分输，配合上 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; }

好了，又搞定了一个。

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

上一篇：深入浅析CSS 选择器分组css选择器中有小数点的标签获取方法CSS3 :default伪类选择器使用简介CSS选择器的新用法(推荐)CSS选择器实现字段解析CSS中选择器的权重值的计算详解CSS3选择器:nth-child和:nth-of-type之间的差异css3之UI元素状态伪类选择器实例演示CSS 属性选择器_动力节点Java学院整理css3类选择器之结合元素选择器和多类选择器用法详解css常用选择器

下一篇：CSS3实现文本垂直排列的方法深入理解CSS行高line-height与文本垂直居中的原理CSS文本和div垂直居中方法总结 通过CSS显示垂直文本以垂直方式显示文本元素通过css控制HTML文本框中的文字垂直居中CSS设置多行文本垂直居中的方法用CSS让img input select button 图片,文本框,下拉菜单,按扭垂直居中的

相关内容

点击排行

本栏推荐

猜你喜欢

-六神源码网