欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

【HTML】仿淘宝五星评价显示任何分数_html/css_WEB-ITnose

程序员文章站 2022-04-21 23:11:36
...
最近做项目做到一个五星评分的,这个分数的显示,要精确到小数,就是如果分数是4.3分,就显示4.3颗星星,这个看上去好像挺难的,但是做起来很简单。

首先我们整理一下思路,这效果要怎么做出来,因为这个分数的原因,很容易让人联想到进度条,所以就想到了用遮罩来出来。做法很简单,灰色星星的图片放在下面,然后亮色星星的图片在上面,重叠两张图片,任何控制上面亮色的星星图片,根据分数显示它的长度,这样便能实现这个效果了。废话不多说,直接把代码贴上。


这是效果图


想要看五星打分的效果实现,看我的下一篇博客。

PS:这是五星显示和打分的源文件以及图片素材http://pan.baidu.com/s/1c0ruT3q


Author:立礼
Sign:人生不要有太多的幻想,而要有更多的行动。

版权声明:本文为博主原创文章,未经博主允许不得转载。