css3动画实例之transition_H5之家 - 中国HTML5教程资源分享第一站

XML/HTML Code复制内容到剪贴板

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<title>CSS3动画</title>
<meta name="author" content="" />
<meta name="copyright" content="" />
<style>
body{ font-family:"微软雅黑"; font-size:12px;}
h1{font-size:16px;}
.test{overflow:hidden;width:100%;margin:0;padding:0;list-style:none;}
.test li{float:left;width:200px;height:30px;margin:5px 5px; line-height:30px; border:1px solid #ddd;background-color:#eee;text-align:center;-moz-transition:width .2s ease-in;-webkit-transition:width .2s ease-in;-o-transition:width .2s ease-in;transition:width .2s ease-in;}
.test li:nth-child(1):hover{width:250px;}
.test li:nth-child(2):hover{width:300px;}
.test li:nth-child(3):hover{width:350px;}
.test li:nth-child(4):hover{width:400px;}
.test li:nth-child(5):hover{width:450px;}
button {cursor:pointer;outline:none;blr:expression(this.hideFocus=true);border-style: solid;border-width: 1px 1px 1px 0;border-color: #e2e2e2;height: 26px;line-height: 26px; float:left}
input {vertical-align:middle;border-style: solid;border-width: 1px;border-color: #BCBCBC #E7E7E7 #E7E7E7 #BCBCBC;height: 24px;line-height: 24px;padding: 0 3px; float: left;}
.forma{ margin:5px 5px;}
.forma input{ width:125px;-moz-transition:width .2s ease-in;-webkit-transition:width .2s ease-in;-o-transition:width .2s ease-in;transition:width .2s ease-in;}
.forma input:hover{ width:250px;}
.forma button{ width:60px;-moz-transition:.2s;-webkit-transition:.2s;-o-transition:.2s;transition:.2s; background-color:#ffffff;}
.forma button:hover{ background-color:#ececec}
</style>
</head>
<body>
<h1>请将鼠标移动到下面的矩形上：</h1>
<ul class="test">
<li>宽度过渡</li>
<li>宽度过渡</li>
<li>宽度过渡</li>
<li>宽度过渡</li>
<li>宽度过渡</li>
</ul>
<form class="forma">
<input type="text"/>
<button>搜索</button>
</form>
</body>
</html>

这里涉及的重要属性是transition.

辅助属性nth-child:这节不予以详细解释，大家只要他是可以灵活定义父元素下子元素的样式即可，下节课再来进行详细解释。
transition中文解释：过渡转变。
transition的语法（缩写）：transition:border-color .5s ease-in .1s;
border-color：设置对象中的参与过渡的属性，比如：width height 等用来定义某些属性的参数
.5s：设置对象过渡的持续时间
ease-in：设置对象中过渡的动画类型
.1s：设置对象延迟过渡的时间

拆分写法：
transition-property:border-color;
transition-duration:.5s,;
transition-timing-function:ease-in,;
transition-delay:.1s,;

控制多个属性过渡：
缩写transition:border-color .5s ease-in .1s,width .1s ease-in .4s;
拆分
transition-property:border-color,width;
transition-duration:.5s,.01s;
transition-timing-function:ease-in,;
transition-delay:.1s,.04s;

扩展：这种属性适合应用于图片与文字间的翻转效果。希望大家试着做些