Question

有没有办法用CSS3 Transitions交叉淡化背景图片。

中的“twitter hover”完全相同

例如：opacity 0.5到1就像那样

我是CSS3中的新手:(

HTML＆amp; CSS

<div id="social-contacts">
    <ul>
        <li id="fb"><a href=""></a></li>
    </ul>
</div>


#social-contacts{
    width: 375px;
    float: left;
    margin-left: 50px;
    margin-top: 100px;
}
#social-contacts li{
    float: left;
    list-style: none;
}
#social-contacts li a{
    display: block;
}
#fb a{
    background: url("http://athimannil.com/page/images/social-icons.png") 0 0;
    width: 45px;
    height: 45px;

    opacity: 0.8;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -o-transition: all 0.5s;
    -ms-transition: all 0.5s;
    transition: all 0.5s;
}
#fb a:hover{
    background-position: 0 47px;
    opacity: 1;
}

DEMO： - http://jsfiddle.net/sweetmaanu/BVLkX/

Answer 1

如果我理解你是正确的，你只想转换不透明属性而不是背景属性，这会产生下滚效果？为此，我们需要指定应转换的属性。

在您的情况下，您已指定过渡效果应应用于all属性，background-position: 0 47px;和opacity: 1;。

因此，您唯一需要做的就是将transition: all 0.5s;更改为transition: opacity 0.5s;。

这是DEMO

希望有所帮助！

Answer 2

你是说这个意思吗？我使用@keyframes创建了它，它将为元素设置动画而不会翻转

Demo

您示例的Demo

带有无限动画的

Example

HTML

<img src="http://images.google.com/intl/en_ALL/images/logos/images_logo_lg.gif" />

CSS

img {
   animation:animate_logo 5s;
   -moz-animation:animate_logo 5s; /* Firefox */
   -webkit-animation:animate_logo 5s; /* Safari and Chrome */
   -o-animation:animate_logo 5s; /* Opera */
}

@keyframes animate_logo {
   from {opacity: .5;}
   to {opacity: 1;}
}

@-moz-keyframes animate_logo /* Firefox */ {
   from {opacity: .5;}
   to {opacity: 1;}
}

@-webkit-keyframes animate_logo /* Safari and Chrome */ {
   from {opacity: .5;}
   to {opacity: 1;}
}

@-o-keyframes animate_logo /* Opera */ {
   from {opacity: .5;}
   to {opacity: 1;}
}

关于CSS3 Keyframes的文章

css3背景位置变化没有翻滚？

2 个答案: