TaoBye

纯JS+css3页面滚动动画效果代码源码下载

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>纯JS+css3页面滚动动画效果代码_淘拜网</title>
<style>
.dowebok{margin:0 auto;}
.dowebok ul{list-style-type:none;}
.dowebok .row{font-size:0;text-align:center;}
.dowebok .wow{display:inline-block;width:280px;height:280px;margin:30px 15px 0;border-radius:50%;font:30px/280px "Microsoft Yahei";vertical-align:top;*display:inline;zoom:1;}
.bg-green{background:#5bd5a0;}
.bg-blue{background:#1daee9;}
.bg-purple{background:#c843a5;}
.bg-red{background:#eb3980;}
.bg-yellow{background:#ffcc35;}
.demo{ width:100%; overflow:hidden; color:red; margin-top:20px;}
</style>
<link rel="stylesheet" href="http://www.taobye.com/pc/download/animate.css">
</head>
<body>
<h1>纯JS+css3页面滚动动画效果代码</h1>
<div class="dowebok">
	<div class="row">
		<div class="wow rollIn bg-blue"></div>
		<div class="wow bounceInDown bg-green">WOW.js</div>
		<div class="wow lightSpeedIn bg-purple"></div>
	</div>

	<div class="row">
		<div class="wow rollIn bg-yellow" data-wow-delay="0.5s">简单易用</div>
		<div class="wow pulse bg-red" data-wow-iteration="5" data-wow-duration="0.15s"></div>
		<div class="wow bounceInRight bg-blue">轻量级</div>
	</div>

	<div class="row">
		<div class="wow bounceInLeft bg-green"></div>
		<div class="wow flipInX bg-purple">WOW.js</div>
		<div class="wow bounceInRight bg-yellow"></div>
	</div>

	<div class="row">
		<div class="wow rollIn bg-blue">无需 jQuery</div>
		<div class="wow shake bg-red" data-wow-iteration="5" data-wow-duration="0.15s"></div>
		<div class="wow swing bg-purple" data-wow-iteration="2">纯 JS</div>
	</div>

	<div class="row">
		<div class="wow rollIn bg-red"></div>
		<div class="wow bounceInU bg-yellow" data-wow-delay="0.5s">WOW.js</div>
		<div class="wow lightSpeedIn bg-green" data-wow-delay="0.5s" data-wow-duration="0.15s"></div>
	</div>

	<div class="row">
		<div class="wow bounceInLeft bg-purple">依赖 animate.css</div>
		<div class="wow pulse bg-blue" data-wow-iteration="5" data-wow-duration="0.25s"></div>
		<div class="wow lightSpeedIn bg-yellow">多种动画</div>
	</div>

	<div class="row">
		<div class="wow bounce bg-green" data-wow-iteration="5" data-wow-duration="0.15s"></div>
		<div class="wow bounceInUp bg-red">WOW.js</div>
		<div class="wow bounceInRight bg-purple"></div>
	</div>

	<div class="row">
		<div class="wow rollIn bg-red" data-wow-delay="0.5s">无需 jQuery！？</div>
		<div class="wow bounceInDown bg-green" data-wow-delay="1s"></div>
		<div class="wow bounceInRight bg-yellow" data-wow-delay="1.5s">谢谢</div>
	</div>
    
    <div class="demo">
    *用法:<br>一：导入animate.css和wow.min.js就可以了。<br>二：在页面底部要调用js用：new WOW().init();<br>三：用的时候你想那个元素出现效果直接加class就可以了。<br>可加如下效果："wow bounceInRight","wow bounceInDown","wow rollIn","wow bounceInUp","wow bounce","wow bounceInLeft","wow lightSpeedIn","wow pulse","wow bounceInU"
    </div>
</div>
<script src="http://www.taobye.com/pc/download/wow.min.js"></script> <script>
if (!(/msie [6|7|8|9]/i.test(navigator.userAgent))){
	new WOW().init();
};
</script>
</body>
</html>
阅读：3664   发布：2017-09-04 17:05:20
正在加载评论...