Question

我想说这个： http://livepipe.net/control/rating评级栏CSS和我唯一的问题是image.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;  
}

具有班级<a>的元素中的每个rating_container标记都会自动将整个评级表设置为背景图片。由于宽度/高度被强制为25乘25，它只会显示一小部分。然后，他根据评级单独设置<a>个班级。例如，当设置评级时，它变为<a class='rating_on'>，匹配的CSS将图像背景位置在y轴上更改为-50px，这会导致25x25 <a>窗口显示不同的图片。

Answer 2

您不需要一张图片，只需要多张图片：

rating_off
rating_half
rating_on
rating_selected

如果未选择任何内容，则会显示5次rating_off 选择2时，2次rating_on和3次rating_off ... 当你没有完全选择一个选项时使用rating_half ......

当用户将鼠标悬停在评级之前（在他选择之前）

时，使用rating_selected

您不需要任何GIF动画

CSS：评级栏上的礼物

2 个答案: