css-frame
/
donghua.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width,initial-scale=1">
	<meta name="Keywords" content="" />
	<meta name="Description" content="" />
	<meta name="author" content="Kamly">
	<title>动画</title>
	<link rel="stylesheet" type="text/css" href="css/normal.css" />
	<link rel="stylesheet" type="text/css" href="css/html5.css" />
	<link rel="stylesheet" type="text/css" href="css/base.css" />
	<link rel="stylesheet" type="text/css" href="css/grid.css" />

	<link rel="stylesheet" type="text/css" href="css/animate.css" />

	<link rel="stylesheet" type="text/css" href="css/index.css" />
	<script  src="js/jquery-1.9.0.min.js" type="text/javascript"></script>

</head>
<body>


<!--
	弹跳
	闪烁
	摇动
	淡入 (up,down,left,righ)
	淡出
	滑入 (up,down,left,righ)
	滑出
	更多动画效果参考：   http://daneden.github.io/animate.css


	需要配合js
-->


	<div class="ui-grid-container">
		<div id="bounce" class="" >
			<h5>弹跳</h5>
		</div>

		<div id="flash" class="" >
			<h5>闪烁</h5>
		</div>

		<div id="pulse" class="" >
			<h5>跳动</h5>
		</div>

		<div id="shake" class="" >
			<h5>摇动</h5>
		</div>

		<div id="fadeIn" class="" >
			<h5>淡入  fade(up,down,left,righ) </h5>
		</div>

		<div id="fadeOut" class="" >
			<h5>淡出  fadeOut(up,down,left,righ) </h5>
		</div>

		<div id="slideInDown" class="" >
			<h5>滑入  slideInDown(up,down,left,righ) </h5>
		</div>

		<div id="slideOutDown" class="" >
			<h5>滑出  slideOutDown(up,down,left,righ) </h5>
		</div>


		<button type="button" class="but">默认</button>
	</div>
	<script  type="text/javascript">

	/*------------
	   弹出效果
	------------*/
	$bounce = $('#bounce');
	$flash = $('#flash');
	$pulse = $('#pulse');
	$shake = $('#shake');
	$fadeIn = $('#fadeIn');
	$fadeOut = $('#fadeOut');
	$slideInDown = $('#slideInDown');
	$slideOutDown = $('#slideOutDown');
	$(".but").bind("click",addclass);

	function addclass(){
		$bounce.addClass("animated  bounce");  /*弹跳*/
		$flash.addClass("animated  flash");  /*闪烁*/
		$pulse.addClass("animated  pulse"); /*跳动*/
		$shake.addClass("animated  shake"); /*跳动*/
		$fadeIn.addClass("animated  fadeIn"); /*淡入*/
		$fadeOut.addClass("animated  fadeOut"); /*淡出*/
		$slideInDown.addClass("animated  slideInDown"); /*淡出*/
		$slideOutDown.addClass("animated  slideOutDown"); /*淡出*/

		setInterval('haha();', 4000);  //每隔3秒循环执行过程函数！
	}


	function haha(){
		$bounce.removeClass("animated  bounce");
		$flash.removeClass("animated  flash");
		$pulse.removeClass("animated  pulse");
		$shake.removeClass("animated  shake");
		$fadeIn.removeClass("animated  fadeIn");
		$fadeOut.removeClass("animated  fadeOut");
		$slideInDown.removeClass("animated  slideInDown");
		$slideOutDown.removeClass("animated  slideOutDown");
	}


	</script>
</body>
</html>