0

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

我的解决方案必须是纯 html/css。（我不想胡闹 javascript/jquery 之类的）

我的网站上有一个活生生的例子。（我希望我的最终结果是中间图标的过渡，但逐渐）

我正在为图像使用精灵。

这是当前的来源：

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

3 回答 3

2

你应该使用不透明度来制作淡入淡出效果

这是你的 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
    }
}
于 2013-07-24T04:07:20.470 回答
0

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

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

于 2013-07-24T04:08:45.057 回答
0

首先，fade不是预定义的缓动函数......所以你需要像#next 一样使用标准缓动。您还需要在#prev上设置过渡，如下所示：

#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）...据我所知，所有支持过渡的浏览器都会交叉淡化图像。

于 2013-07-24T04:15:08.113 回答