這篇文章主要介紹“如何使用CSS繪制星級評分效果”，在日常操作中，相信很多人在如何使用CSS繪制星級評分效果問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”如何使用CSS繪制星級評分效果”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！
目前創(chuàng)新互聯(lián)已為近1000家的企業(yè)提供了網(wǎng)站建設、域名、虛擬主機、網(wǎng)站托管、服務器托管、企業(yè)網(wǎng)站設計、江山網(wǎng)站維護等服務，公司將堅持客戶導向、應用為本的策略，正道將秉承"和諧、參與、激情"的文化，與客戶和合作伙伴齊心協(xié)力一起成長，共同發(fā)展。
先來看一下CSS繪制五角星的基本方法：
CSS Code復制內(nèi)容到剪貼板
#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: "";
}
有了這個基礎，基本上星級評分的效果就容易實現(xiàn)了：
下圖是Demo中會用到的圖，可右鍵另存
HTML Code
XML/HTML Code復制內(nèi)容到剪貼板
CSS Code
CSS Code復制內(nèi)容到剪貼板
.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
}
這樣就基本實現(xiàn)了鼠標hover顯示對應的星級，后面再增加點JS來實現(xiàn)click效果就可以啦
到此，關于“如何使用CSS繪制星級評分效果”的學習就結(jié)束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續(xù)學習更多相關知識，請繼續(xù)關注創(chuàng)新互聯(lián)網(wǎng)站，小編會繼續(xù)努力為大家?guī)砀鄬嵱玫奈恼拢?/p>
名稱欄目：如何使用CSS繪制星級評分效果
URL分享：http://weahome.cn/article/ghdegi.html
重慶分公司
重慶分公司
