大橙子网站建设,新征程启航
为企业提供网站建设、域名注册、服务器等服务
这篇文章主要介绍“如何使用CSS绘制星级评分效果”,在日常操作中,相信很多人在如何使用CSS绘制星级评分效果问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”如何使用CSS绘制星级评分效果”的疑惑有所帮助!接下来,请跟着小编一起来学习吧!
目前创新互联已为近1000家的企业提供了网站建设、域名、虚拟主机、网站托管、服务器托管、企业网站设计、江山网站维护等服务,公司将坚持客户导向、应用为本的策略,正道将秉承"和谐、参与、激情"的文化,与客户和合作伙伴齐心协力一起成长,共同发展。
先来看一下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复制内容到剪贴板
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绘制星级评分效果”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注创新互联网站,小编会继续努力为大家带来更多实用的文章!