CSS3背景转换

所以我想完全重新创建色带过渡，但我做错了。我的ribbon图像是140x160[宽度，高度]，但悬停时什么也没发生

我说：

#toplogo {
    position: absolute;
    left: 400px;
    background-position: 0px -10px;
    z-index: 5000;
}


#toplogo a {
    background: url('ribbon.png') no-repeat;
    width: 140px;
    height: 160px;
    display: block;
    background-position: 0px -10px;
    text-indent: -9999px;
    -webkit-transition: 0.10s ease-in;
    -moz-transition: 0.10s ease-in;
}



<div id="toplogo"> <a href="/">hello</a> </div>

#toplogo{
位置：绝对位置；
左：400px；
背景位置：0px-10px；
z指数：5000；
}
#toplogo a{
背景：url（'ribbon.png'）不重复；
宽度：140px；
高度：160px；
显示：块；
背景位置：0px-10px；
文本缩进：-9999px；
-webkit过渡：0.10s易用性；
-moz转换：0.10s易用性；
}

将此添加到CSS中-

#toplogo a:hover{
  background-position: 0px 0px;
}

试一试

#toplogo a {
    background: url('ribbon.png') no-repeat;
    width: 140px;
    height: 160px;
    display: block;
    background-position: 0px -10px;
    text-indent: -9999px;
    -webkit-transition: background-position .1s ease-in;
    -moz-transition: background-position .1s ease-in;
}

#toplogo a:hover {
  background-position: 0 0;
}