這種星星評價效果,相信大家這個並不陌生,經常會遇到這個。現在如果要我們自己實現乙個,很多人第一反應可能用js+css去實現它。這種方式並沒有什麼不好的地方,只是我們在復用的時候不是很方便,需要帶上js和css的兩塊**。為了復用更簡單,所以我們介紹一種純css的方式。
這裡我們分為兩層:
第一層:div.star_evaluate 設定背景icon-star-default.png,沿x軸平鋪,超出部分隱藏,作為定位父級。
第二層:a標籤作為第二層,這裡我們需要設定其定位屬性,初始化設定好每個a標籤的位置,以及其背景。這邊需要注意的是一定要給a便簽加上層級。
滑鼠移動對應的星星時,將其left屬性設定為0,然後設定其寬度,這個寬度由其對應的星級決定,最後別忘了設定其層級。
關於層級的設定,我們一定要保證div.star_evaluatehtml
css
上面我們的星星評分效果已初見成效,但是暴露了乙個問題,就是我們的評價機制缺少記憶功能。接下來我們來優化一下。/*去掉標籤預設樣式*/
ul /*初始化樣式*/
.star_evaluate
.star
.star_1
.star_2
.star_3
.star_4
.star_5
/*滑鼠懸浮*/
.star:hover
.star_1:hover
.star_2:hover
.star_3:hover
.star_4:hover
.star_5:hover
同上。這邊我們實現星星評分記憶的功能主要依賴input[type=radio]單選框,我們的星星評分主要分為三個狀態。
初始化狀態:在初始化狀態下,我們需要跟上面一樣初始化星星的位置。這裡有點不一樣的是每個星星對應乙個單選框和乙個label標籤,label的層級要高於單選框。另外我們通過label的for的屬性來實現和單選框的聯絡。
懸浮狀態:在懸浮狀態下,我們要根據懸浮所對應的星星來設定label標籤的寬度,left屬性設定為0。此時我們要保證該懸浮狀態下的label標籤的層級低於其他label標籤。
選中狀態:在選中狀態下,我們跟懸浮狀態一樣設定label標籤的寬度。
html
css3
/*去掉標籤預設樣式*/
ul input
/*初始化樣式*/
.star_evaluate
.star,.score
.star
.score
.star_1, .score_1
.star_2, .score_2
.star_3, .score_3
.star_4, .score_4
.star_5, .score_5
/*滑鼠懸浮*/
.star:hover
.star_1:hover
.star_2:hover
.star_3:hover
.star_4:hover
.star_5:hover
/*選中之後*/
.score:checked + .star
.score_1:checked + .star_1
.score_2:checked + .star_2
.score_3:checked + .star_3
.score_4:checked + .star_4
.score_5:checked + .star_5
使用CSS繪製星級評分效果的方法
先來看一下css繪製五角星的基本方法 css code複製內容到剪貼簿 有了這個基礎,基本上星級評分的效果就容易實現了 下圖是demo中會用到的圖,可右鍵另存 html code xml html code複製內容到剪貼簿 css code css code複製內容到剪貼簿 這樣就基本實現了滑鼠ho...
純css動畫效果 animate的應用
需要某個小圖示或者文字轉圈的效果,部分夥伴會用js去寫乙個定時器,然後再去清空定時器,這樣做是比較麻煩的。之前在學css裡的有乙個animate方法。下面就講animate的使用 語法 animation name duration timing function delay iteration c...
純css設定元素過渡效果
1.首先,先設定乙個div,待會我們使用css3給這個div設定過渡效果。2.然後給div設定寬高和背景,這裡我就設定成200畫素,深粉色。3.接著開始設定transition屬性,通過這個屬性就可以給元素新增過渡效果。4.如圖所示 第乙個引數表示的是要過渡的屬性值,第二個引數表示的是過渡時間,這裡...