1949啦网--小小 痛苦,是因为能力和欲望不匹配造成的

CSS3通过js控制animate运动

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

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

微信扫码关注

更新实时通知

作者:xialibing 分类:网页教程 浏览: