您的位置:首页> 前端教程> CSS3教程
文章导航

CSS3 transition-property

2018-9-6 00:53| 作者: admin| 查看: 903| 评论: 0|来自: 蚂蚁部落

此属性用来设置进行动画过渡的css属性。

更多关于transition内容可以参阅CSS3 transition一章节。

语法结构:

[CSS] 纯文本查看 复制代码
transition-property:all | none | <property>[ ,<property> ]*

参数解析:

(1).all:设置所有可以进行过渡的属性具有过渡效果。

(2).none:不指定可以进行过渡的属性。

(3).<property>:指定可以进行过渡的属性。

特别说明:如果设置多个属性,属性名称之间用逗号分隔。

代码实例:

[HTML] 纯文本查看 复制代码
<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>蚂蚁部落</title> 
<style> 
#ant{
  width:100px;
  height:100px;
  background:blue;
  transition-property:width;
  transition-duration:2s;
}
#ant:hover{
  width:500px;
}
</style>
</head>
<body>
<div id="ant"></div>
</body>
</html>

以上代码设置的过渡属性为width,当鼠标悬浮时,width值过渡到500px。

[HTML] 纯文本查看 复制代码
<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>蚂蚁部落</title> 
<style> 
#ant{
  width:100px;
  height:100px;
  background:blue;
   
  transition-property:width,height;
  transition-duration:2s;
}
#ant:hover{
  width:500px;
  height:200px;
}
</style>
</head>
<body>
<div id="ant"></div>
</body>
</html>

以上代码可以设置两个属性的过渡效果,属性之间用逗号分隔。


鲜花

握手

雷人
1

路过

鸡蛋

刚表态过的朋友 (1 人)

最新评论

返回顶部