是否有可能在CSS3中动画移动和褪色的文本



我要做的是将第一个文本向右滑动,然后在隐藏文本中淡出。可能吗?

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

<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;}

你很接近了。

  1. visible不是display的有效值
  2. 你需要移动的地方: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;
}

Re:动画化display属性-显示上的过渡:property.

相关内容

  • 没有找到相关文章

最新更新