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.3 rem; height : . 14 rem; overflow : hidden ; } .grade-star-gradual { height : 0.16 rem; -webkit-border-radius: . 15 rem; border-radius: . 15 rem; overflow : hidden ; background : #e5e5e5 ; } .grade-star-gradual span.progress { width : 0 ; height : 100% ; display : block ; -webkit-border-radius: . 15 rem; border-radius: . 15 rem; -webkit-transition: width 1 s ease-out; -o-transition: width 1 s ease-out; transition: width 1 s 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-number 1 {{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; } |
好了,又搞定了一个。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
相关文章
如何使用CSS的object-position实现图片在img标签中的定位
该文章介绍了CSS中的object-position属性,用于精确控制替换元素在容器内的位置,通过指定水平和垂直方向的偏移量,可以实现精准定位2024-11-08- 文章主要探讨了CSS Grid布局在Internet Explorer(IE)中的不兼容问题,并提供了具体的解决方案和最佳实践,文章首先介绍了CSS Grid布局的基本概念和与传统布局方法的区别,然2024-11-08
- 本文介绍了CSS实现圆角渐变边框的方法,首先设置元素边框为1像素宽度,样式为实线,颜色为透明,然后设置元素边框圆角为10像素,再设置背景剪裁区域和背景绘制区域为内边距和边2024-10-29
- 在CSS布局中,实现元素左右排列有多种方式,Flex布局通过设置margin-left:auto或margin-right:auto实现元素靠右或靠左排列,Grid布局利用grid-template-columns和justify-self2024-10-29
- 在CSS中,隐藏滚动条同时保留滚动功能可以通过设置overflow属性和使用特定的CSS伪元素实现,例如,使用::-webkit-scrollbar针对WebKit浏览器,-ms-overflow-style适用于IE和Edg2024-10-29
- 本文详细介绍了CSS中的border属性及其相关特性,包括border-width(宽度)、border-style(样式)和border-color(颜色)等,此外,还讲述了如何独立控制元素的四个边的边框,2024-10-28
- 本文主要介绍了在网页开发中如何实现“回到顶部”的功能,通过HTML和CSS的编写,可以实现一个浮动在页面右下角的小图标,点击后即可回到页面顶部,这种设计可以提高网站的可用2024-10-28
- 盒子模型是网页布局的基础,包括边框、外边距、内边距和实际内容,通过CSS可以控制盒子之间的距离及其外观,如边框样式、边框颜色等,重要属性包括padding和margin,分别控制内2024-10-18
- 盒子模型是网页布局的基础,包括边框、外边距、内边距和实际内容,通过CSS可以控制盒子之间的距离及其外观,如边框样式、边框颜色等,重要属性包括padding和margin,分别控制内2024-10-18
CSS使用filter和backdrop-filter实现高斯模糊效果(示例代码)
本文详细介绍了CSS3中的两个实现高斯模糊效果的API:filter和backdrop-filter,filter可以直接在图像或背景图上添加多种效果,而backdrop-filter则用于在元素后的区域添加效2024-09-26
最新评论