Question

我遇到了一些css和转换问题。我可以让它做一个平滑的过渡（它滑动的地方）或瞬间过渡（我希望它是一个平滑的淡入淡出效果）

我的解决方案必须是纯html / css。（我不想用javascript / jquery之类的东西来徘徊）

实例是my website。（我希望我的最终结果是中间图标的过渡，但是渐进的）

我正在为图片使用精灵。

以下是当前来源：

<!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>

Answer 1

你应该使用不透明度来产生淡入淡出效果

这是你的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
    }
}

Answer 2

使用CSS3不能直接在图像区域之间交叉淡入淡出。 fade属性对于这些情况无效。但是，可以在两个不同的图像之间进行交叉淡入淡出。

这是一个可以解释它的链接： http://css3.bradshawenterprises.com/cfimg/

Answer 3

首先，淡入淡出不是预定义的缓动功能...所以你需要像#next一样使用标准的易用性。您还需要在 #prev a 上设置转换，如下所示：

#prev a{
    background:url('http://www.aeonsplice.com/testicons.png') 32px 0;
    -webkit-transition: all 0.5s;
}
#prev a:hover{
    background: url('http://www.aeonsplice.com/testicons.png') 32px 32px;
}

在不添加标记的情况下轻松淡化2张图片...只需将背景更改为另一张图片（即testicons-hover.png）...据我所知，所有支持过渡的浏览器都会褪色图像。

css3拒绝正常过渡

3 个答案: