简单的 CSS3 淡入/淡出精灵图像导航

Question

我正在尝试创建一个水平菜单，该菜单将显示一个图标列表，下面有居中文本。

这是我迄今为止取得的成就：

http://lifeofstrange.com/fade/

我希望图标使用一个图像精灵，当您悬停时会淡入/淡出，如果可能的话，下面的文本也将具有淡入淡出效果。

我

非常接近实现效果，但是我不确定 css3 过渡在代码中的位置，

非常感谢您的帮助或协助。

Answer 1

如果要在箭头和文本上进行淡入淡出过渡，则不希望更改文本的颜色和箭头背景的位置。您要做的是将背景设置为较暗的箭头，然后在悬停时将其不透明度设置为0.6或其他内容，并且与文本相同。如果您转换背景位置，您将看到从精灵的一部分到另一部分的滑动效果，这不是您想要的。

ul li a {
    -webkit-transition: opacity 0.3s;
    -moz-transition: opacity 0.3s;
    -o-transition: opacity 0.3s;
    transition: opacity 0.3s;
}
ul li a:hover {
    opacity: 0.6;
}