使用CSS绘制星级评分效果的方法
WEB前端开发 发布时间:2015-08-05 16:50:02 作者:佚名 我要评论
这篇文章主要介绍了使用CSS绘制星级评分效果的方法,当然要动态地使用鼠标点击打分还需要使用JavaScript脚本,本文只讲述绘制部分,需要的朋友可以参考下
先来看一下CSS绘制五角星的基本方法:
CSS Code复制内容到剪贴板
- #star-five {
- margin: 50px 0;
- position: relative;
- display: block;
- color: red;
- width: 0px;
- height: 0px;
- border-right: 100px solid transparent;
- border-bottom: 70px solid red;
- border-left: 100px solid transparent;
- -moz-transform: rotate(35deg);
- -webkit-transform: rotate(35deg);
- -ms-transform: rotate(35deg);
- -o-transform: rotate(35deg);
- }
- #star-five:before {
- border-bottom: 80px solid red;
- border-left: 30px solid transparent;
- border-right: 30px solid transparent;
- position: absolute;
- height: 0;
- width: 0;
- top: -45px;
- left: -65px;
- display: block;
- content: "";
- -webkit-transform: rotate(-35deg);
- -moz-transform: rotate(-35deg);
- -ms-transform: rotate(-35deg);
- -o-transform: rotate(-35deg);
- }
- #star-five:after {
- position: absolute;
- display: block;
- color: red;
- top: 3px;
- left: -105px;
- width: 0px;
- height: 0px;
- border-right: 100px solid transparent;
- border-bottom: 70px solid red;
- border-left: 100px solid transparent;
- -webkit-transform: rotate(-70deg);
- -moz-transform: rotate(-70deg);
- -ms-transform: rotate(-70deg);
- -o-transform: rotate(-70deg);
- content: "";
- }
有了这个基础,基本上星级评分的效果就容易实现了:
下图是Demo中会用到的图,可右键另存
HTML Code
XML/HTML Code复制内容到剪贴板
- <ul class="rating nostar">
- <li class="one"><a href="#" title="1 Star">1</a>
- </li>
- <li class="two"><a href="#" title="2 Stars">2</a>
- </li>
- <li class="three"><a href="#" title="3 Stars">3</a>
- </li>
- <li class="four"><a href="#" title="4 Stars">4</a>
- </li>
- <li class="five"><a href="#" title="5 Stars">5</a>
- </li>
- </ul>
CSS Code
CSS Code复制内容到剪贴板
- .rating {
- width: 124px;
- height: 19px;
- margin: 0 0 20px 0;
- padding: 0;
- list-style: none;
- clear: both;
- position: relative;
- background: url(http://www.zjgsq.com/wp-content/uploads/2014/09/stars.png) no-repeat 0 0;
- }
- .nostar {
- background-position: 0 0
- }
- .onestar {
- background-position: 0 -19px
- }
- .twostar {
- background-position: 0 -38px
- }
- .threestar {
- background-position: 0 -57px
- }
- .fourstar {
- background-position: 0 -76px
- }
- .fivestar {
- background-position: 0 -95px
- }
- ul.rating li {
- cursor: pointer;
- float: left;
- text-indent: -999em;
- }
- ul.rating li a {
- position: absolute;
- left: 0;
- top: 0;
- width: 25px;
- height: 19px;
- text-decoration: none;
- z-index: 200;
- }
- ul.rating li.one a {
- left: 0
- }
- ul.rating li.two a {
- left: 25px;
- }
- ul.rating li.three a {
- left: 50px;
- }
- ul.rating li.four a {
- left: 75px;
- }
- ul.rating li.five a {
- left: 100px;
- }
- ul.rating li a:hover {
- z-index: 2;
- width: 125px;
- height: 19px;
- overflow: hidden;
- left: 0;
- background: url(http://www.zjgsq.com/wp-content/uploads/2014/09/stars.png) no-repeat 0 0
- }
- ul.rating li.one a:hover {
- background-position: 0 -19px;
- }
- ul.rating li.two a:hover {
- background-position: 0 -38px;
- }
- ul.rating li.three a:hover {
- background-position: 0 -57px
- }
- ul.rating li.four a:hover {
- background-position: 0 -76px
- }
- ul.rating li.five a:hover {
- background-position: 0 -95px
- }
这样就基本实现了鼠标hover显示对应的星级,后面再增加点JS来实现click效果就可以啦
相关文章
- CSS梯形导航图是一种使用 CSS 布局实现的导航设计,可以根据需要灵活调整导航菜单的上下位置和大小,本文主要介绍了css实现电梯导航,具有一定的参考价值,感兴趣的可以了解2023-05-06
- 本文主要介绍了CSS中calc(100%-100px)不加空格不生效,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学2023-05-05
- 本文主要介绍了css弧边选项卡的项目实践,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2023-05-05
- Css(层叠样式表)是种格式化网页的标准方式,用于控制设置网页的样式,并且允许CSS样式信息与网页内容(由HTML语言定义)分离的一种技术,使用css可以制作各种好看的动画特效,2023-05-04
- CSS的link和@import都是用于引入外部CSS文件的方法,但它们有一些区别和不同的用法,本文通过一个简单的代码演示,展示了link和@import的用法,感兴趣的朋友跟随小编一起看2023-05-04
- 这篇文章主要介绍了使用CSS实现百叶窗效果示例代码,技术上只使用了css+html,还是非常容易学习的,做出来的百叶窗效果也是很丝滑,文中提供了详细的代码,需要的朋友可以参考2023-04-28
- 这篇文章主要介绍了使用CSS实现按钮边缘跑马灯动画,技术上只使用了css+html,还是非常容易学习的,文中提供了详细的代码,需要的朋友可以参考下2023-04-28
- 本文主要介绍了css旋转导航的示例代码,文中通过示例代码介绍的非常详细,该导航可用在一些网站首页导航栏中,需要的朋友们下面随着小编来一起学习学习吧2023-04-27
- 这篇文章将介绍如何使用CSS实现交融文字效果,这是一种独特的标题设计,可以增加页面的视觉吸引力和用户体验。通过使用CSS的letter-spacing属性,我们可以创建出字母之间交2023-04-27
- 在使用弹性布局的时候,必然会有碰到分配子元素空间问题,本文主要介绍了flex子元素内容超出盒子容器宽度问题解决,感兴趣的可以了解一下2023-04-24
最新评论