我在 CSS 和转换方面遇到了一些问题。我可以让它进行平滑过渡(滑动的地方)或瞬时过渡(我希望它是平滑的淡入淡出效果)
我的解决方案必须是纯 html/css。 (我不想用 javascript/jquery 之类的东西胡闹)
一个活生生的例子在 my website 上. (我希望我的最终结果是中间图标的过渡，但渐进)
我正在为图像使用 sprite。
这是当前的来源:
<!DOCTYPE html>
<html>
<head>
<style>
#navlist{position:relative;}
#navlist li{margin:0;padding:0;list-style:none;position:absolute;top:0;}
#navlist li, #navlist a{height:32px;display:block;}
#home{left:0px;width:32px;}
#home a{background:url('http://www.aeonsplice.com/testicons.png') 0 0;}
#home a:hover{background: url('http://www.aeonsplice.com/testicons.png') 0 32px;-webkit-transition:0.5s;}
#prev{left:32px;width:32px;}
#prev a{background:url('http://www.aeonsplice.com/testicons.png') 32px 0;}
#prev a:hover{background: url('http://www.aeonsplice.com/testicons.png') 32px 32px;-webkit-transition:0.5s fade;}
#next{left:64px;width:32px;}
#next a{background:url('http://www.aeonsplice.com/testicons.png') 64px 0;}
#next a:hover{background: url('http://www.aeonsplice.com/testicons.png') 64px 32px;-webkit-transition:0.5s linear;}
</style>
</head>
<body>
<ul id="navlist">
<li id="home"><a href="#"></a></li>
<li id="prev"><a href="#"></a></li>
<li id="next"><a href="#"></a></li>
</ul>
</body>
</html>
最佳答案
你应该使用不透明度来制作淡入淡出的效果
这是你的CSS http://jsfiddle.net/3jqcX/
#navlist {
position:relative;
}
#navlist li {
margin:0;
padding:0;
list-style:none;
position:absolute;
top:0;
}
#navlist li, #navlist a {
height:32px;
display:block;
}
#home {
left:0px;
width:32px;
}
#home a {
background:url('http://www.aeonsplice.com/testicons.png') 0 0;
}
#home a:hover {
background: url('http://www.aeonsplice.com/testicons.png') 0 32px;
-webkit-animation:fade 0.5s
}
#prev {
left:32px;
width:32px;
}
#prev a {
background:url('http://www.aeonsplice.com/testicons.png') 32px 0;
}
#prev a:hover {
background: url('http://www.aeonsplice.com/testicons.png') 32px 32px;
-webkit-animation: fade 0.5s;
}
#next {
left:64px;
width:32px;
}
#next a {
background:url('http://www.aeonsplice.com/testicons.png') 64px 0;
}
#next a:hover {
background: url('http://www.aeonsplice.com/testicons.png') 64px 32px;
-webkit-animation: fade 0.5s;
}
@-webkit-keyframes fade {
0% {
opacity:0;
}
50% {
opacity:0.5;
}
100% {
opacity:1
}
}
关于html - css3 拒绝正确过渡，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17824922/