星级环绕文字的展示效果

效果图如下：

思路：li设置为大小等于环绕图像的大小，设置决定定位，然后设置使li的右下角刚好等于环绕中心；为了看清楚效果 设置了li的背景色：五个li是重叠在一起的。

                                                  

然后使用css3的transform，让这五个正方形（即li绕该点旋转transform-origin: 100% 100%;）分别设旋转角度，效果图如下，右图为去掉背景色的效果

发现此时的五角星也随之发生变化，因此旋转li 里面的i元素 ，让它旋转回来。

 

最终效果图如下：

特别的，在ie8不支持transform效果：会显示如左图：因此取消了li的定位和width,position: static9; 20px9;效果如右图

代码如下：

.userbox{
    width: 240px;
    overflow: hidden;
    height:240px;
    background:  #6c9ce6 ;
    background: -webkit-linear-gradient(bottom, #86c7f1 , #6c9ce6); /* Safari 5.1 - 6.0 */
    background: -o-linear-gradient(top, #86c7f1, #6c9ce6); /* Opera 11.1 - 12.0 */
    background: -moz-linear-gradient(top, #86c7f1, #6c9ce6); /* Firefox 3.6 - 15 */
    background: linear-gradient(to top, #86c7f1 , #6c9ce6); /* 标准的语法 */
    position: relative;
}
.userbox img{width: 80px;height:80px;border-radius: 80px;margin:0 auto;display: block;}
.start{margin: 20px 0 10px;text-align: center;height: 50px;}
.start ul{position:relative;}
.start li{width:80px;  height:80px;position: absolute;top: 17px;left:40px;transform-origin: 100% 100%;position: static9;width: 20px9;}
.start i{font-size: 15px;color: #f6bc00;display: inline-block;height: 80px;line-height: 80px;}

.start li:first-child{ transform: rotate(-16.25deg); -ms-transform:rotate(-16.25deg);  -moz-transform:rotate(-16.25deg);  -o-transform:rotate(-16.25deg); -webkit-transform:rotate(-16.25deg);  }
.start li:nth-child(2){ transform: rotate(14.375deg);  -ms-transform:rotate(14.375deg);-moz-transform:rotate(14.375deg);-o-transform:rotate(14.375deg); -webkit-transform:rotate(14.375deg); }
.start li:nth-child(3){ transform: rotate(45deg); -ms-transform:rotate(45deg);-moz-transform:rotate(45deg);-o-transform:rotate(45deg); -webkit-transform:rotate(45deg);  }
.start li:nth-child(4){ transform: rotate(75.625deg);  -ms-transform:rotate(75.625deg);-moz-transform:rotate(75.625deg);-o-transform:rotate(75.625deg); -webkit-transform:rotate(75.625deg); }
.start li:nth-child(5){ transform: rotate(106.25deg); -ms-transform:rotate(106.25deg); -moz-transform:rotate(106.25deg); -o-transform:rotate(106.25deg); -webkit-transform:rotate(106.25deg);  }
.start li:first-child i{transform: rotate(16.25deg);  -ms-transform:rotate(16.25deg);-moz-transform:rotate(16.25deg);-o-transform:rotate(16.25deg); -webkit-transform:rotate(16.25deg); }
.start li:nth-child(2) i{ transform: rotate(-14.375deg); -ms-transform:rotate(-14.375deg);-moz-transform:rotate(-14.375deg);-o-transform:rotate(-14.375deg); -webkit-transform:rotate(-14.375deg); }
.start li:nth-child(3) i{ transform: rotate(-45deg); -ms-transform:rotate(-45deg); -moz-transform:rotate(-45deg); -o-transform:rotate(-45deg); -webkit-transform:rotate(-45deg);  }
.start li:nth-child(4) i{ transform: rotate(-75.625deg); -ms-transform:rotate(-75.625deg);-moz-transform:rotate(-75.625deg);-o-transform:rotate(-75.625deg); -webkit-transform:rotate(-75.625deg);  }
.start li:nth-child(5) i{ transform: rotate(-106.25deg); -ms-transform:rotate(-106.25deg); -moz-transform:rotate(-106.25deg); -o-transform:rotate(-106.25deg); -webkit-transform:rotate(-106.25deg); }