【问题标题】:Fade in SVG background image淡入 SVG 背景图像
【发布时间】:2015-10-21 20:36:05
【问题描述】:

当鼠标悬停在 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;
} 

我尝试了在网上找到的不同方法,但没有任何效果,我错过了什么?

【问题讨论】:

    标签: jquery html css svg


    【解决方案1】:

    让两个图像都可见,一个在另一个之上(所以你只能看到最上面的那个)。

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

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

    类似这样的东西(尽管您可能还需要 Chrome/Opera/Safari 的 -webkit-animation),顶部图像具有“淡入淡出”类

    【讨论】:

    • 您如何将其放入代码中,同时为褪色添加特定时间?
    猜你喜欢
    • 2019-08-29
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2019-07-27
    • 1970-01-01
    • 2023-03-09
    相关资源
    最近更新 更多