现在的位置: 首页 > 软件开发 > 正文

css transition属性,适用于firefox chrome

2014年07月20日 软件开发 ⁄ 共 590字 暂无评论 ⁄ 被围观 65+

css transition(过渡)属性可以实现动态延展效果,适用于firefox、chrome、Safari、Opera、IE10+浏览器,对IE的10以下版本浏览器无效

测试代码

<style> 
.tdiv{width:100px;height:100px;background:blue;transition:width 2s,height 1s;}
.tdiv:hover{width:600px;height:300px}
</style>
<div class="tdiv"></div>

效果:

请把鼠标指针移动到蓝色的 div 元素上,就可以看到过渡效果。

transition属性有4个参数,语法:

transition: property duration timing-function delay;
property:需要经历过渡变化的属性,例如width,height;
duration:过渡历程时间,单位秒,例如 2s;
timing-function:过渡效果的速度曲线;
delay:延迟,多久后开始过渡,共用于过渡开始和还原

给我留言

您必须 [ 登录 ] 才能发表留言!

×
#