css - 简单的 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;
}