1

有没有办法使用 CSS3 过渡来交叉淡化背景图像。

基本上需要这个视频中的“twitter悬停” http://youtu.be/uCcQHXeiPTY

例如：不透明0.5喜欢1那个

我是 CSS3 的新手 :(

HTML 和 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;
}​

演示：- http://jsfiddle.net/sweetmaanu/BVLkX/

4

2 回答 2

2

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

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

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

这是一个演示

希望有帮助！

于 2012-12-19T16:26:22.130 回答
1

你的意思是这样吗？我使用@keyframes它制作了它，它将为元素设置动画而不会翻转

演示

您的示例的演示

无限动画示例

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 关键帧的文章

于 2012-12-19T06:21:57.340 回答