Question

我有这个问题从一个图标淡入到另一个图标，当悬停在SVG精灵作为背景图像时。

#About1 a {
    background: url(../_images/Center_Nav.svg) no-repeat center -788px;
}

#About1 a:hover {
    background: url(../_images/Center_Nav.svg) no-repeat center -888px;
}

我尝试过在网络上找到的不同方法，但没有任何效果，我缺少什么？

Answer 1

让两个图像一个在另一个上面可见（所以你只看到顶部图像）。

悬停时，降低顶部图像的不透明度。

.fade {
   transition: opacity 5s ease-in-out;
}

.fade:hover {
   opacity: 0;
}

像这样的东西（虽然你可能还需要-webkit-animation for Chrome / Opera / Safari），顶部图像有一个“淡化”类

淡入SVG背景图像

1 个答案: