介绍转换属性:没有| |所有财产; & lt; !DOCTYPE html>
& lt; html>
& lt; head>
& lt;元charset=癠TF-8"祝辞
& lt; style>
div
{
宽度:100 px;
身高:100 px;
背景:红色;
保证金:10 px 0 px;
}
.demo1 {
转换属性:宽度;
transition-duration: 2 s;
-moz-transition-property:宽度;/* Firefox 4 */-moz-transition-duration: 2 s;/* Firefox 4 */-webkit-transition-property:宽度;/* Safari和Chrome */-webkit-transition-duration: 2 s;/* Safari和Chrome */-o-transition-property:宽度;/* */-o-transition-duration: 2 s;/* */}
.demo2 {
转换属性:高度;
transition-duration: 2 s;
-moz-transition-property:高度;/* Firefox 4 */-moz-transition-duration: 2 s;/* Firefox 4 */-webkit-transition-property:高度;/* Safari和Chrome */-webkit-transition-duration: 2 s;/* Safari和Chrome */-o-transition-property:高度;/* */-o-transition-duration: 2 s;/* */}
.demo1:徘徊
{
宽度:300 px;
}
.demo2:徘徊
{
身高:150 px;
}
& lt;/style>
& lt;/head>
& lt; body>
& lt; p>请把鼠标指针移动到红色的div元素上,查看过渡效果。;/p>
& lt; p>宽度属性发生变化:& lt;/p>
& lt; div类=癲emo1"祝辞& lt;/div>
& lt; p>高度属性发生变化:& lt;/p>
& lt; div类=癲emo2"祝辞& lt;/div>
& lt; p> & lt; b>注释:& lt;/b>本例在Internet Explorer中无效。;/p>
& lt;/body>
& lt;/html>
转换属性属性的使用方法?这个问题可能是我们日常学习或工作经常见到的。希望通过这个问题能让你收获颇深。下面是小编给大家带来的参考内容,让我们一起来看看吧!
转换属性属性是用于指定应用过渡效果的CSS属性的名称,当指定的CSS属性发生改变时,过渡效果将开始。
<强>作用:转换属性属性规定应用过渡效果的CSS属性的名称。(当指定的CSS属性改变时,过渡效果将开始)。
<强>提示:强过渡效果通常在用户将鼠标指针浮动到元素上时发生。
<强>语法:
没有:没有属性会获得过渡效果。
:所有属性都将获得过渡效果。
属性:定义应用过渡效果的CSS属性名称列表,列表以逗号分隔。
<强>注:需要始终设置transition-duration属性,否则时长为0,就不会产生过渡效果。
<强>
效果图:
感谢各位的阅读!看完上述内容,你们对转换属性属性的使用方法大概了解了吗?希望文章内容对大家有所帮助。如果想了解更多相关文章内容,欢迎关注行业资讯频道。
