css - 评分效果的星星外衣

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

css - 评分效果的星星外衣

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

分步骤图:

css - 评分效果的星星外衣

css - 评分效果的星星外衣

css - 评分效果的星星外衣

css - 评分效果的星星外衣

css - 评分效果的星星外衣

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

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

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

 乖乖坐下来看设计稿。

 

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

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

css - 评分效果的星星外衣

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

 

 

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

结构如下:

css - 评分效果的星星外衣

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

<div> <div> <span></span> </div> </div>

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/zywwfd.html