css transition(过渡)属性可以实现动态延展效果,适用于firefox、chrome、Safari、Opera、IE10+浏览器,对IE的10以下版本浏览器无效
测试代码
[php]<style>
.tdiv{width:100px;height:100px;background:blue;transition:width 2s,height 1s;}
.tdiv:hover{width:600px;height:300px}
</style>
<div class="tdiv"></div>[/php]
效果:
请把鼠标指针移动到蓝色的 div 元素上,就可以看到过渡效果。
transition属性有4个参数,语法:
[php]transition: property duration timing-function delay;
property:需要经历过渡变化的属性,例如width,height;
duration:过渡历程时间,单位秒,例如 2s;
timing-function:过渡效果的速度曲线;
delay:延迟,多久后开始过渡,共用于过渡开始和还原[/php]