×
CSS绘制星星评分
优畅主题 前端开发 2014-09-07 19:04 8,507 2 条评论

今天优畅给大家介绍一个纯CSS写的星星评分展示效果。主要是

border

的一个非常巧妙的实际运用,非常不错,很值得学习。先看下演示效果吧。

CSS绘制星星评分

HTML结构代码

<div class="rating rating-1">
  <i class="star-1">★</i>
  <i class="star-2">★</i>
  <i class="star-3">★</i>
  <i class="star-4">★</i>
  <i class="star-5">★</i>
</div>
<div class="rating rating-1-half">
  <i class="star-1">★</i>
  <i class="star-2">★</i>
  <i class="star-3">★</i>
  <i class="star-4">★</i>
  <i class="star-5">★</i>
</div>
<div class="rating rating-2">
  <i class="star-1">★</i>
  <i class="star-2">★</i>
  <i class="star-3">★</i>
  <i class="star-4">★</i>
  <i class="star-5">★</i>
</div>
<div class="rating rating-2-half">
  <i class="star-1">★</i>
  <i class="star-2">★</i>
  <i class="star-3">★</i>
  <i class="star-4">★</i>
  <i class="star-5">★</i>
</div>
<div class="rating rating-3">
  <i class="star-1">★</i>
  <i class="star-2">★</i>
  <i class="star-3">★</i>
  <i class="star-4">★</i>
  <i class="star-5">★</i>
</div>
<div class="rating rating-3-half">
  <i class="star-1">★</i>
  <i class="star-2">★</i>
  <i class="star-3">★</i>
  <i class="star-4">★</i>
  <i class="star-5">★</i>
</div>
<div class="rating rating-4">
  <i class="star-1">★</i>
  <i class="star-2">★</i>
  <i class="star-3">★</i>
  <i class="star-4">★</i>
  <i class="star-5">★</i>
</div>
<div class="rating rating-4-half">
  <i class="star-1">★</i>
  <i class="star-2">★</i>
  <i class="star-3">★</i>
  <i class="star-4">★</i>
  <i class="star-5">★</i>
</div>
<div class="rating rating-5">
  <i class="star-1">★</i>
  <i class="star-2">★</i>
  <i class="star-3">★</i>
  <i class="star-4">★</i>
  <i class="star-5">★</i>
</div>

CSS样式代码

.rating {
  margin: 10px 0;
}

.rating i {
  display: inline-block;
  width: 0;
  height: 1.5em;
  border-width: 0 0.75em;
  border-style: solid;
  border-color: #eee;
  border-radius: .22em;
  color: white;
  background: #eee;
  font-style: normal;
  line-height: 1.6em;
  text-indent: -0.5em;
  text-shadow: 1px 0 1px #b3b3b3;
}

/** Colors */
.rating-1 .star-1,
.rating-1-half .star-1 {
  border-color: #cc8b1f;
  background: #cc8b1f;
}

.rating-1-half .star-2 {
  border-left-color: #cc8b1f;
}

.rating-2 .star-1,
.rating-2-half .star-1 {
  border-color: #dcb228;
  background: #dcb228;
}

.rating-2 .star-2,
.rating-2-half .star-2 {
  border-color: #dcb228;
  background: #dcb228;
}

.rating-2-half .star-3 {
  border-left-color: #dcb228;
}

.rating-3 .star-1,
.rating-3-half .star-1 {
  border-color: #f0991e;
  background: #f0991e;
}

.rating-3 .star-2,
.rating-3-half .star-2 {
  border-color: #f0991e;
  background: #f0991e;
}

.rating-3 .star-3,
.rating-3-half .star-3 {
  border-color: #f0991e;
  background: #f0991e;
}

.rating-3-half .star-4 {
  border-left-color: #f0991e;
}

.rating-4 .star-1,
.rating-4-half .star-1 {
  border-color: #f26a2c;
  background: #f26a2c;
}

.rating-4 .star-2,
.rating-4-half .star-2 {
  border-color: #f26a2c;
  background: #f26a2c;
}

.rating-4 .star-3,
.rating-4-half .star-3 {
  border-color: #f26a2c;
  background: #f26a2c;
}

.rating-4 .star-4,
.rating-4-half .star-4 {
  border-color: #f26a2c;
  background: #f26a2c;
}

.rating-4-half .star-5 {
  border-left-color: #f26a2c;
}

.rating-5 .star-1,
.rating-5-half .star-1 {
  border-color: #dd050b;
  background: #dd050b;
}

.rating-5 .star-2,
.rating-5-half .star-2 {
  border-color: #dd050b;
  background: #dd050b;
}

.rating-5 .star-3,
.rating-5-half .star-3 {
  border-color: #dd050b;
  background: #dd050b;
}

.rating-5 .star-4,
.rating-5-half .star-4 {
  border-color: #dd050b;
  background: #dd050b;
}

.rating-5 .star-5,
.rating-5-half .star-5 {
  border-color: #dd050b;
  background: #dd050b;
}

.rating-5-half .star-6 {
  border-left-color: #dd050b;
}

通过上面的实现方式,相信大家都可以学到一些东西。最后在感谢大家多多关注优畅主题,谢谢!


如果本文对你有帮助,你可以扫描右边的二维码打赏,谢谢支持
联系优畅:uctheme#qq.com (#改为@)
微信订阅号:优畅主题(uctheme)
官网淘宝店:http://uctheme.taobao.com
版权声明:版权归 优畅主题 所有,转载请注明出处!
转载请保留链接: https://www.uctheme.com/877/
谢谢微信打赏

微信钱包扫描赞助

谢谢支付宝打赏

支付宝扫一扫赞助

品牌创立:2012-11-18优畅主题

优畅主题成立于2012年11月18日,专业Wordpress导购主题开发商,拥有多年Wordpress主题设计经验,专门为淘宝客和导购客站长量身打造高端赚钱模板,我们注重细节,有着严谨的开发态度,一切从客户角度出发,如果你也喜欢 WordPress导购主题,欢迎和我们一起交流!

上一篇 设为主页代码,添加到收藏夹代码 响应式多级菜单 下一篇

1 + 7 = ?

  1. 沙发!
    chonghua 2014-09-08 下午 8:30 [回复]

    博主有没有成品可供使用呢

取消

感谢您的支持,我们会继续努力的!

扫码支持
请支付模板相应的价格

打开支付宝扫一扫,即可进行扫码支付哦

切换注册

登录

忘记密码 ?

您也可以使用第三方帐号快捷登录

Q Q 登 录
微 博 登 录
切换登录

注册