过度代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no,width=device-width,height=device-height">
<meta charset="UTF-8">
<meta name="Author" content="haley">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>CSS3 过渡 transition</title>
<style>
div.ra
{
width:100px;
height:100px;
background:#00AEEF;
transition:all 2s;
-moz-transition:all 2s; /* Firefox 4 */
-webkit-transition: all 2s; /* Safari and Chrome */
-o-transition: all 2s;/* Opera */
}
div.ra:hover {
height: 200px;
-webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */
transform: rotate(180deg);
width:300px;
background:#0000ff;
color:#fff;
}
table{
border-collapse: collapse;border-spacing: 0;
}
table td,table th{
border: 1px solid #333;
text-align: center;
vertical-align:middle;
height: 30px;
line-height: 30px;;
}
</style>
</head>
<body>
<div class="ra">div里面的内容</div>
<div>
<ul>
<li>transition的属性可以是尺寸、颜色、动画</li>
<li>时间曲线transition-timing-function：
<table>
<thead>
<tr><th>值</th><th>描述</th></tr>
</thead>
<tbody>
<tr><td>linear</td><td>规定以相同速度开始至结束的过渡效果（等于 cubic-bezier(0,0,1,1)）。</td></tr>
<tr><td>ease</td><td>规定慢速开始，然后变快，然后慢速结束的过渡效果（cubic-bezier(0.25,0.1,0.25,1)）。</td></tr>
<tr><td>ease-in</td><td>规定以慢速开始的过渡效果（等于 cubic-bezier(0.42,0,1,1)）。</td></tr>
<tr><td>ease-out</td><td>规定以慢速结束的过渡效果（等于 cubic-bezier(0,0,0.58,1)）。</td></tr>
<tr><td>ease-in-out</td><td>规定以慢速开始和结束的过渡效果（等于 cubic-bezier(0.42,0,0.58,1)）。</td></tr>
<tr><td>cubic-bezier(n,n,n,n)</td><td>在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。</td></tr>
</tbody>
</table>
</li>
<li><a href="http://www.runoob.com/cssref/css3-pr-transition-timing-function.html">更多资料</a></li>
</ul>
</div>
</body>
</html>
时间： 2024-10-11 21:01:15