如何在css精灵悬停上制作过渡效果

Posted 2023-03-06

【中文标题】如何在css精灵悬停上制作过渡效果

【英文标题】：How to make transition effect on css sprite hover

【发布时间】：2013-08-03 22:30:09

【问题描述】：

这是我的 css sprite 代码的一部分

        #IconSet a 
        width: 36px;
        height: 36px;
        display: inline-block;
    

    #DeviantArtIcon 
        border-width: 0px;
        border-style: none;
        background-image: url(http://static.monstermmorpg.com/images/csssprites/SocialIcons.png);
        background-color: transparent;
        background-repeat: repeat-x;
        background-position: -144px -0px;
        width: 36px;
        height: 36px;
    

    #DeviantArtIcon:hover 
        border-width: 0px;
        border-style: none;
        background-image: url(http://static.monstermmorpg.com/images/csssprites/SocialIcons.png);
        background-color: transparent;
        background-repeat: repeat-x;
        background-position: -144px -36px;
        width: 36px;
        height: 36px;
    

 <a id="DeviantArtIcon" href="http://monstermmorpg.deviantart.com" rel="nofollow" target="_blank" title="Monster MMORPG On Deviant Art - Please Watch Our Channel"></a>

现在，当这个图标悬停时，我想要过渡效果。我该怎么做？

我在这里尝试过，但没有成功

CSS Fade Between Background Images on Hover

【问题讨论】：

你对动画的最终目标是什么？你想让它淡入还是向上移动？现在，当您在 css3 中添加过渡效果时，我可以看到它会将图标滑动到活动状态。

【参考方案1】：

1) 您尚未在 CSS 中应用任何 transition effects。

2) :hover 效果中无需添加过渡效果。

#DeviantArtIcon  
-o-transition:2s ease-out, background 2s ease-in;
-ms-transition:2s ease-out, background 2s ease-in;
-moz-transition:2s ease-out, background 2s ease-in;
-webkit-transition:2s ease-out, background 2s ease-in;         
transition:2s ease-out, background 2s ease-in;

在jSFiddle查看这个

希望这是你正在尝试的。

【参考方案2】：

将图像淡入另一个：

HTML：

<a id="deviant-art-icon" href="http://monstermmorpg.deviantart.com"><span></span></a>

CSS：

#deviant-art-icon 
    background:url(http://static.monstermmorpg.com/images/csssprites/SocialIcons.png) no-repeat;
    display: inline-block;
    position: relative;
    text-indent: -9999px;
    width: 36px;
    height: 36px;
    background-position: -144px -0px;


#deviant-art-icon span 
    position: absolute;
    top:0;
    left:0;
    bottom:0;
    right:0;  background:url(http://static.monstermmorpg.com/images/csssprites/SocialIcons.png) no-repeat;
    background-position: -144px -36px;
    opacity: 0;
    -webkit-transition: opacity 0.5s;
    -moz-transition:    opacity 0.5s;
    -o-transition:      opacity 0.5s;


#deviant-art-icon:hover span 
    opacity: 1;

演示：http://jsfiddle.net/hxJyw/2/

【讨论】：

@MonsterMMORPG，你这样做的时候后台加载了多少次？