纯CSS实现网站常用的五角星评分和分数展示交互效果

最近做的一个项目涉及到评分和展示分数的模块，UI设计师也给了几个切好的图片，实现五角星评分方式很多，本质爱折腾的精神和对性能追求以及便于维护的考虑，搜集和尝试了很多方式，最终采用了纯css驱动的实现方式完成评分和展示分数的功能，没有js,也就意味着没判断逻辑，代码出错的几率更少，也更便于维护，在此，把这个功能的实现的过程记录和分享一下，一起学习交流。

原文收录在我的 GitHub博客 (https://github.com/jawil/blog) ，喜欢的可以关注最新动态，大家一起多交流学习，共同进步。

五角星的实现

1.图片或者字体图标

不极致追求性能的话,直接利用设计师给的png或者jpg啥的,或者直接转成base64.

2:利用Fontawesome 图标库，其实只是一种矢量字体。

HTML:

<div class="icon"></div>

CSS:

@import url(http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css);

.icon:before {

    content: '\f005';

    font-family: FontAwesome;

}

在线预览地址

3.利用css3描绘拼凑一个五角星。

基本原理：利用transparent的透明不可见和transform转换拼接一个正五角星。

HTML:

<div class="star-five"></div>

CSS:

.star-five{

width: 0;

height: 0;

color: red;

margin: 50px 0;

position: relative;

display: block;

border-left: 100px solid transparent;

border-right: 100px solid transparent;

border-bottom: 70px solid red;

transform:rotate(35deg);

}

.star-five:before{

width: 0;

height: 0;

border-left: 30px solid transparent;

border-right: 30px solid transparent;

border-bottom: 80px solid red;

position: absolute;

top: -45px;

left: -65px;

color: white;

display: block;

content: "";

transform:rotate(-35deg);

}

.star-five:after{

width: 0;

height: 0;

display: block;

position: absolute;

color: red;

top: 3px;

left: -105px;

border-left: 100px solid transparent;

border-right: 100px solid transparent;

border-bottom: 70px solid red;

content: "";

transform:rotate(-70deg);

}

在线预览地址

不建议使用这种，因为选择之后改变颜色状态比较麻烦，改起来很不方便，不如前面几种方便好维护。

4.直接使用五角星符号

★