› 首页 ›期权学习›期权知识›正文

CSS3通过js控制animate运动

xiaojiucai 期权知识 2020-08-18 556 0

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/post/7203.html

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

版权声明

本文仅代表作者观点，不代表本站立场。
本文系作者授权发表，未经许可，不得转载。