css 评分效果的星星示例

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

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

分步骤图：

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

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

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

乖乖坐下来看设计稿。

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

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

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

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

结构如下:

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

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

如图，

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

span.progress负责彩色的进度条

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