时间:2016-01-22 07:31 来源: 我爱IT技术网 作者:佚名
本文所分享的知识点是【css3中transition属性详解】，欢迎您喜欢我爱IT技术网所分享的教程、知识、经验或攻略，下面是详细的讲解。
css3中transition属性详解
<style type="text/css">
.trans1{
-webkit-transition:0.5 ease;
-moz-transition:0.5s ease;
-webkit-transition-property:all;
-moz-transition-property:all;
position:absolute;
left:10px;
top:50px;
height:100px;
width:150px;
background:#EF4900;
color:white;
}
.trans2{
-webkit-transition:0.5 ease;
-moz-transition:0.5s ease;
-webkit-transition-property:width;
-moz-transition-property:width;
position:absolute;
left:350px;
top:50px;
height:100px;
width:150px;
background:#EF4900;
color:white;
}
.trans3{
-webkit-transition:0.5s ease;
-moz-transition:0.5s ease;
-webkit-transition-property:height;
-moz-transition-property:height;
position:absolute;
left:780px;
top:50px;
height:100px;
width:150px;
background:#EF4900;
color:white;
}
.trans1:hover{
width:300px;
height:300px;
}
.trans2:hover{
width:400px;
}
.trans3:hover{
height:500px;
}
</style></p>
<p><body>
<div class="trans1">变换所有的属性</div>
<div class="trans2">只变换宽度属性</div>
<div class="trans3">只变换高度属性</div>
</body>
关于css3中transition属性详解的相关讨论如下：
相关问题：transition 例子css3求解释？
答：transition:background 0.2s linear 0s; 过渡效果 这个例子是 从0秒开始 经过0.2秒的时间 用linear(一种线性设置)缓慢改变背景颜色 text-shadow 给文字加阴影效果 >>详细
相关问题：css3 transition属性的运用问题
答：display转变是没办法用transition实现的。 不如考虑用opacity看看。 >>详细
相关问题：CSS3的transition属性的动画
答：#div6{background-color:#CC9966;height:155px;width:155px;-webkit-transition:transform 2s ease 0s,background-color 2s ease 3s}#div6:hover{-webkit-transform:rotateY(55deg);background-color:#FF0033}这样看下 >>详细
- 评论列表（网友评论仅供网友表达个人看法，并不表明本站同意其观点或证实其描述）
-