css3 transition的应用

css3 的transition：允许css属性值在一定的时间区内平滑的过渡。

transition-property：变换延续的时间

transition-duration：在延续时间段

transition-timing-function：变换速度变化

transition-delay：变化延迟时间

 

a：{all  0.5s  ease-in  1s；}这里的四个值分别对应上面的四个属性。

* {margin:0;padding:0;}
ul{width:300px;}
ul:after {clear:both;display:block;content:".";height:0;visibility:hidden;font-size:0;line-height:0;}
ul li{list-style:none;font-size:12px;color:#069;border:1px solid #CBCBCB;background-color:#E5E5E5;border-radius:3px;box-shadow:1px 1px 0 #96969D;width:280px;height:30px;margin-bottom:20px;}
li a{position:relative;width:230px;height:30px;padding-left:25px;display:block;}
li a img{position:absolute;top:6px;left:5px;border:0 none;display:block;}
li a span, li a strong{position:absolute;top:0;left:25px;opacity:1;
-webkit-transition:all 800ms linear;
-moz-transition:all 800ms linear;
-o-transition:all 800ms linear;line-height:30px;width:240px;}
li a strong{top:30px;opacity:0;}
li a:hover{color:#FF6500;_background-color:#E5E5E5;font-weight:bolder;}
li a:hover strong{top:0;opacity:1;}
li a:hover span{top:-30px;opacity:0;}

 

　　

<div>
<ul>
    <li><a href="http://www.cnblogs.com/web-sheena"><span>sheena的博客1</span><strong>看看效果如何</strong></a></li>
    <li><a href="http://www.cnblogs.com/web-sheena"><span>sheena的博客2</span><strong>看看效果如何</strong></a></li>
    <li><a href="http://www.cnblogs.com/web-sheena"><span>sheena的博客3</span><strong>看看效果如何</strong></a></li>
</ul>
</div>

　　原理就是利用定位的相对a标签的距离的不同，结合transition的平滑过渡，和显示隐藏，实现动态的文字替换的过程。