Question

我要做的是将第一段文字向右滑动，然后淡入隐藏文字..可能吗？

还在用CSS3测试一些东西，并想知道这是否可行：http://jsfiddle.net/ht65k/

HTML

<ul id="socialnetworks">
    <li>
        <span><a  href="#">Fade in Text</a></span>
        <a href="#">Slide to Right</a>
    </li>
</ul>

CSS

#socialnetworks li{
    /*border-bottom: 1px #ddd solid;
    padding-bottom: 5px;
    margin-bottom: 5px;*/
    -moz-transition-property: all;
    -webkit-transition-property: all;
    -o-transition-property: all;
    transition-property: all;
    -moz-transition-duration: 0.8s;
    -webkit-transition-duration: 0.8s;
    -o-transition-duration: 0.8s;
    transition-duration: 0.8s;
    }

#socialnetworks li:hover{ padding-left: 120px; }
#socialnetworks span{ display: none; }
#socialnetworks span:hover{ display: visible;}

Answer 1

你很亲密。

visible is not a valid value for display
您需要移动应用:hover伪类的位置，因为您不能将鼠标悬停在隐藏元素上。

演示：http://jsfiddle.net/mattball/r5Hcu。它不是动画，但你应该能够弄清楚其余部分。

修改后的CSS

#socialnetworks li {
    -moz-transition-property: all;
    -webkit-transition-property: all;
    -o-transition-property: all;
    transition-property: all;
    -moz-transition-duration: 0.8s;
    -webkit-transition-duration: 0.8s;
    -o-transition-duration: 0.8s;
    transition-duration: 0.8s;
}

#socialnetworks li:hover {
    padding-left: 120px;
}

#socialnetworks span {
    display: none;
}

#socialnetworks:hover span {
    display: inline;
}

重新：动画display属性 - Transitions on the display: property。

是否可以使用CSS3为文本中的移动和淡入设置动画？

1 个答案: