您的位置：首页 > Web前端 > CSS

CSS3 transition-property属性

2016-03-22 12:33 645 查看

实例讲解：

<style type="text/css">

div
{
　　width:100px;
　　height:100px;
　　background:blue;
　　transition-property: width;
　　transition-duration: 2s;
　　-moz-transition-property: width; /* Firefox 4 */
　　-moz-transition-duration: 2s; /* Firefox 4 */
　　-webkit-transition-property: width; /* Safari and Chrome */
　　-webkit-transition-duration: 2s; /* Safari and Chrome */
　　-o-transition-property: width; /* Opera */
　　-o-transition-duration: 2s; /* Opera */
}

div:hover
{
width:300px;
}

</style>

<body>

　　<div></div>

</body>

讲解：

把鼠标指针放到div元素上，会产生带有平滑改变元素高度的过滤效果.

注意：IE9以及更早版本的浏览器不支持transition-property属性。

定义和用法：

　　transition-property属性规定应用过滤效果的Css属性的名称。(当指定的css属性改变时，过滤效果将开始)。

提示：过滤效果通常在用户将鼠标指针浮动到元素上时发生。

注释：请始终设置transition-duration属性，否则时长为0，就不会产生过滤效果。

默认值：all

继承性：no

版本：CSS3

JavaScript语法：object.style.transitionProperty="width,height"

语法：

transition-property：none|all|property

none：没有属性会获取过滤效果

all：所有属性都将获得过滤效果

property：定义应用过滤效果的CSS属性名称列表，列表以逗号分隔。
http://www.w3school.com.cn/cssref/pr_transition-property.asp

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航