CSS过渡图像
问题描述:
这是背景图像:CSS过渡图像
#logo
{background-image:url('logo.png');width:20px;height:23px;}
#logo:hover
{background-position:0 -23px;-webkit-transition: all 0.5s ease;}
#logo span
{margin-left:-3000px;}
<a href="#"><div id="logo"><span>logo</span></div></a>
此代码给我一个滑动效果(从黑色S到粉红色的垂直滑动),而不是褪色效果我正在寻找。创建两个图像可以解决问题,但在这种情况下这是不可能的。
如何在仅使用一个图像时获得淡入淡出效果?
答
试试这个 - http://jsfiddle.net/Wds5z/4/
a, #logo {
background: url('http://i.stack.imgur.com/w5ZnN.png') 0 -23px;
width: 20px;
height: 23px;
display: block;
}
#logo {
background-position: 0 0;
-webkit-transition: opacity .5s linear;
-moz-transition: opacity .5s linear;
transition: opacity .5s linear;
}
#logo:hover {
opacity: 0;
}
#logo span {
margin-left:-3000px;
}
呸,只是打我给它 - http://jsfiddle.net/9qzEX/ – Neil 2012-07-06 23:36:31
@Neil您在FF工作:)可能是添加的所有好主意前缀扩大浏览器支持..更新 – 2012-07-06 23:40:28
佐尔坦,你的代码工作很好。但是,当你退出时,不会有任何褪色。这是可补充的吗? – Felix 2012-07-07 00:09:12