CSS：評級欄上的禮物

Question

我想把這個： http://livepipe.net/control/rating評級欄CSS和我唯一的問題是image.gif。任何人都可以幫助我嗎？如果我嘗試構建它，就會發生gif動畫：在一定時間間隔內變化的圓形，而不是當您點擊它們時。如果任何人都可以上傳一個示例或解釋如何正確構建這種類型的gif，請大大讚賞。

http://livepipe.net/control/rating

Answer 1

如果你看一下該網頁的源代碼，你會看到，用於評價this is the image。

它是一個單一的.gif，它不是動畫。要控制顯示什麼選擇，他已經定義了一些CSS類，如下所示：

.rating_container a { 
    float:left; 
    display:block; 
    width:25px; 
    height:25px; 
    border:0; 
    background-image:url("/stylesheets/rating.gif"); 
} 

.rating_container a.rating_off { 
    background-position:0 0px; 
} 

.rating_container a.rating_half { 
    background-position:0 -25px; 
} 

.rating_container a.rating_on { 
    background-position:0 -50px; 
} 

.rating_container a.rating_selected { 
    background-position:0 -75px; 
} 

與類rating_container元素中的每個<a>標籤會自動設置整個評分表，因爲它的背景圖像。由於寬度/高度被強制爲25乘25，它只會顯示一小部分。然後，他根據評分分別設置<a>班。例如，在設置評分時，它將變爲<a class='rating_on'>，匹配CSS會將圖像背景位置在y軸上改變-50px，這會導致窗口顯示不同的圖片。

Answer 2

你並不需要一個形象，但多張圖片：

• rating_off
• rating_half
• rating_on
• rating_selected

然後您展示5次rating_off沒事的時候選擇rating_on 2倍和3倍rating_off 2時選擇了... rating_half是用來當你沒有完全選擇一個選項...

使用的rating_selected當用戶將鼠標懸停在評級（他選擇前）

你不需要任何動畫GIF