提交 6beba4d9 编写于 作者: Z zhangt

update

上级 c8dc1c75
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>动画</title>
<link rel="stylesheet" type="text/css" href="css/reset.css"/>
<link rel="stylesheet" type="text/css" href="css/animate.css"/>
<style>
body{overflow:hidden;}
*{font-size:14px;}
input{font-size:12px;width:100%;border:1px solid #ccc;line-height:25px;color:#666;}
p{line-height:25px;color:#333;}
.tip{width:50px;height:50px;background:#6CF;margin:40px auto;}
.cell{float:left;text-align:center;margin:0 20px;}
.ipt{width:90px;text-align:center;}
</style>
</head>
<body>
<div class="cf">
<div class="cell">
<p>从上往下渐显</p>
<input class="ipt" type="text" value="showInTop" />
<div class="tip showInTop a-time1 a-yj"></div>
</div>
<div class="cell">
<p>从下往上渐显</p>
<input class="ipt" type="text" value="showInBottom" />
<div class="tip showInBottom a-time1 a-yj"></div>
</div>
<div class="cell">
<p>从右往左渐显</p>
<input class="ipt" type="text" value="showInRight" />
<div class="tip showInRight a-time1 a-yj"></div>
</div>
<div class="cell">
<p>从右往左移动</p>
<input class="ipt" type="text" value="showRight" />
<div class="tip showRight a-time1 a-yj"></div>
</div>
<div class="cell">
<p>从上往下移动</p>
<input class="ipt" type="text" value="showTop" />
<div class="tip showTop a-time1 a-yj"></div>
</div>
<div class="cell">
<p>从左往右渐显</p>
<input class="ipt" type="text" value="showInLeft" />
<div class="tip showInLeft a-time1 a-yj"></div>
</div>
<div class="cell">
<p>从左往右移动</p>
<input class="ipt" type="text" value="showLeft" />
<div class="tip showLeft a-time1 a-yj"></div>
</div>
<div class="cell">
<p>渐显,反向:a-yjfx</p>
<input class="ipt" type="text" value="fadeIn" />
<div class="tip fadeIn a-time1 a-yjfx"></div>
</div>
<div class="cell">
<p>渐显,无反向</p>
<input class="ipt" type="text" value="fadeIn" />
<div class="tip fadeIn a-time1"></div>
</div>
<div class="cell">
<p>从小变大</p>
<input class="ipt" type="text" value="zoomIn" />
<div class="tip zoomIn a-time1 a-yj"></div>
</div>
<div class="cell">
<p>从大变小</p>
<input class="ipt" type="text" value="inZoom" />
<div class="tip inZoom a-time1 a-yj"></div>
</div>
<div class="cell">
<p>上下跳动</p>
<input class="ipt" type="text" value="shangxia" />
<div class="tip shangxia a-time1 a-yj a-yjfx"></div>
</div>
<div class="cell">
<p>上下跳动-缓冲</p>
<input class="ipt" type="text" value="bounce" />
<div class="tip bounce a-time1 a-yj"></div>
</div>
<div class="cell">
<p>顺时针转圈</p>
<input class="ipt" type="text" value="zhuanquan" />
<div class="tip zhuanquan a-time1 a-yj"></div>
</div>
<div class="cell">
<p>逆时针转圈</p>
<input class="ipt" type="text" value="zhuanquan-ni" />
<div class="tip zhuanquan-ni a-time1 a-yj"></div>
</div>
<div class="cell">
<p>橡皮筋</p>
<input class="ipt" type="text" value="rubberBand" />
<div class="tip rubberBand a-time1 a-yj"></div>
</div>
<div class="cell">
<p>shake</p>
<input class="ipt" type="text" value="shake" />
<div class="tip shake a-time1 a-yj"></div>
</div>
<div class="cell">
<p>meteor</p>
<input class="ipt" type="text" value="meteor" />
<div class="tip meteor a-time1 a-yj"></div>
</div>
</div>
<!--退场动画-->
<p class="mb10">退场动画</p>
<div class="cf">
<div class="cell of">
<p>从左往右退出</p>
<input class="ipt" type="text" value="outRight" />
<div class="tip outRight a-time1 a-yj"></div>
</div>
<div class="cell of">
<p>从右往左退出</p>
<input class="ipt" type="text" value="outLeft" />
<div class="tip outLeft a-time1 a-yj"></div>
</div>
<div class="cell of">
<p>从下往上退出</p>
<input class="ipt" type="text" value="outTop" />
<div class="tip outTop a-time1 a-yj"></div>
</div>
<div class="cell">
<p>从上往下退出</p>
<input class="ipt" type="text" value="outBottom" />
<div class="tip outBottom a-time1 a-yj"></div>
</div>
<div class="cell">
<p>从上往下渐隐</p>
<input class="ipt" type="text" value="hideToBottom" />
<div class="tip hideToBottom a-time1 a-yj"></div>
</div>
<div class="cell">
<p>渐隐</p>
<input class="ipt" type="text" value="fadeOut" />
<div class="tip fadeOut a-time1 a-yj"></div>
</div>
</div>
</body>
</html>
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册