用純css打造星級(jí)評(píng)分效果正在被越來越多地應(yīng)用在網(wǎng)絡(luò)RIA中，結(jié)合ajax等技術(shù)，可以渲染出很出色的視覺效果和很棒的用戶體驗(yàn)，在這篇文章開始之前，大家可以先去cssheaven感受一下。

最近由于項(xiàng)目需要，我在網(wǎng)上找了很多css星級(jí)評(píng)分的例子和說明，但是發(fā)現(xiàn)大多數(shù)都是翻譯國外的文章，而且解釋得并不是非常清楚，所以我決定自己來做一個(gè)總結(jié)，也希望能夠給大家一些幫助。

首先用中文寫一下這個(gè)效果的算法：
1. 使用背景圖片的位置切換來獲得星級(jí)效果；



2. 整個(gè)效果最關(guān)鍵的地方就是“三層理論”，整個(gè)效果分為三層——空分層、分?jǐn)?shù)層和打分層，三層的布局均為absolute，以避免ul本身自帶的相對(duì)布局（當(dāng)然用div也可以獲得同樣效果）；
3. 空分層就是使用背景圖片中的“空星”作為背景，并橫向平鋪；
4. 分?jǐn)?shù)層的寬度等于（分?jǐn)?shù)*圖片寬度）得到的數(shù)值，并且使用背景圖片中的“分?jǐn)?shù)星（例子中為黃色）”作為背景橫向平鋪；
5. 打分層就是將5個(gè)空鏈接置于5個(gè)星星的位置上（寬度要和背景圖片吻合），并將5個(gè)a：hover的背景設(shè)為“打分星（這里為綠色）”，寬度設(shè)為星數(shù)*圖片寬度，left為0(靠左，這樣結(jié)合a：hover不同的寬度就可以出現(xiàn)打分效果)，垂直坐標(biāo)小于a的垂直坐標(biāo)（以確保當(dāng)前a：hover不會(huì)遮擋住其他鏈接）；

最新評(píng)論