Html CSS：评级栏上的礼物

我想说： 一个分级栏CSS和我唯一的问题是image.gif。有人能帮我吗？如果我尝试构建它，我会看到gif动画：在一个时间间隔内变化的圆圈，而不是当你点击它们时。如果有人能上传一个例子或解释如何正确构建这种类型的gif，我将不胜感激

---

您不需要一个图像，而是需要多个图像：

评级 评级半 评级 所选评级单位 然后，当未选择任何内容时，您将显示5次“关闭” 选择2时，2倍额定值打开，3倍额定值关闭。。。 当您未完全选择某个选项时，将使用额定值_一半

当用户在选择之前将鼠标悬停在分级上时，将使用所选分级

---

您不需要任何动画GIF

如果查看该网页的来源，您将看到用于评级的GIF

它是一个.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;  
}

带有class rating_容器的元素中的每个标记都会自动将整个评级表设置为其背景图像。由于宽度/高度强制为25乘25，因此仅显示其一小部分。然后，他根据评分分别设置课程。例如，当等级设置为on时，匹配的CSS会在y轴上将图像背景位置更改-50px，这会导致25x25窗口显示不同的图片