首頁 > web前端 > css教學 > 非常漂亮的css星效果總結第1/2頁_經驗交流

非常漂亮的css星效果總結第1/2頁_經驗交流

PHP中文网
發布: 2016-05-16 12:06:48
原創
1371 人瀏覽過

用純css打造星級評分效果正在被越來越多地應用在網絡RIA中,結合ajax等技術,可以渲染出很出色的視覺效果和很棒的用戶體驗,在這篇文章開始之前,大家可以先去cssheaven感受。

最近由於專案需要,我在網路上找了很多css星級評分的例子和說明,但是發現大多數都是翻譯國外的文章,而且解釋得併不是非常清楚,所以我決定自己來做一個總結,也希望能夠給大家一些幫助。

先用中文寫出這個效果的演算法:
1. 使用背景圖片的位置切換來獲得星級效果;

非常漂亮的css星效果總結第1/2頁_經驗交流
2. 整個效果最關鍵的地方就是“三層理論”,整個效果分為三層——空分層、分數層和打分層,三層的佈局均為absolute,以避免ul本身自帶的相對佈局(當然用p也可以獲得相同效果);
3. 空分層就是使用背景圖片中的「空星」作為背景,並橫向平鋪;
4. 分數層的寬度等於(分數*圖片寬度)得到的數值,並且使用背景圖片中的“分數星(例子中為黃色)”作為背景橫向平鋪;
5. 打分層就是將5個空鏈接置於5個星星的位置上(寬度要和背景圖片吻合),並將5個a:hover的背景設為“打分星(這裡為綠色)”,寬度設為星數*圖片寬度,left為0 (靠左,這樣結合a:hover不同的寬度就可以出現打分效果),垂直座標小於a的垂直座標(以確保當前a:hover不會遮擋住其他連結); 

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板