CSS3通过js控制animate运动

时间：6年前阅读：5712

1、Swiper Animate是Swiper中文网提供的用于在Swiper内快速制作CSS3动画效果的小插件，使用方法也非常简单，页面里写的很清楚，我就不多说了，下面小例子来看吧。

<!DOCTYPE html>    
<html>    
	<head>    
		<meta charset="UTF-8">    
		<title></title>    
		<link rel="stylesheet" type="text/css" href="../uu/animate.min.css"/> <!--引用animate.css-->    
		<style type="text/css">    
			*{    
				padding: 0;    
				margin: 0;    
			}    
			h1{    
				width: 500px;    
				height: 100px;    
				background: cadetblue;    
				color: white;    
				text-align: center;    
				line-height: 100px;    
				margin: 100px auto;    
			}    
		</style>    
	</head>    
	<body>    
		<input type="button" name="btn" id="btn" value="点击运动" />    
		<br /><br />    
		<!--加animated这个插件的动画  ，动画的名字bouncelnleft-->    
		<h1 id="cc">学习animate 运动库</h1>    
		<script type="text/javascript">    
			document.getElementById('btn').onclick = function(){    
				var cc = document.getElementById('cc');    
				cc.className = 'animated bounceInLeft'; //className 属性设置或返回元素的 class 属性。    
			}    
		</script>    
	</body>    
</html>

本站声明:网站内容来源于网络,如有侵权,请联系我们https://www.qiquanji.com,我们将及时处理。

微信扫码关注

更新实时通知

CSS3通过js控制animate运动

网友评论