這種星星評價效果，相信大家這個並不陌生，經常會遇到這個。現在如果要我們自己實現乙個，很多人第一反應可能用js+css去實現它。這種方式並沒有什麼不好的地方，只是我們在復用的時候不是很方便，需要帶上js和css的兩塊**。為了復用更簡單，所以我們介紹一種純css的方式。
這裡我們分為兩層：
第一層：div.star_evaluate 設定背景icon-star-default.png，沿x軸平鋪，超出部分隱藏，作為定位父級。
第二層：a標籤作為第二層，這裡我們需要設定其定位屬性，初始化設定好每個a標籤的位置，以及其背景。這邊需要注意的是一定要給a便簽加上層級。
滑鼠移動對應的星星時，將其left屬性設定為0，然後設定其寬度，這個寬度由其對應的星級決定，最後別忘了設定其層級。
關於層級的設定，我們一定要保證div.star_evaluatehtml
/*去掉標籤預設樣式*/
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
/*去掉標籤預設樣式*/
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.如圖所示 第乙個引數表示的是要過渡的屬性值，第二個引數表示的是過渡時間，這裡...