”筱航科技”教你使用animate.css和wow制作页面动画效果
发布时间：2020-03-20 22:43:08
作者：筱航科技
来源：本站
浏览量（220）
点赞（187）
摘要：animate.css配合wow.min.js实现各种页面滚动效果，有的页面在向下滚动的时候，有些元素会产生细小的动画效果，虽然动画比较小，但却能吸引你的注意，比如刚刚发布的 iPhone 6 的页面，如果你希望你的页面也更加有趣，那么你可以试试 WOW.js。
animate.css配合wow.min.js实现各种页面滚动效果
有的页面在向下滚动的时候，有些元素会产生细小的动画效果，虽然动画比较小，但却能吸引你的注意，比如刚刚发布的 iPhone 6 的页面，如果你希望你的页面也更加有趣，那么你可以试试 WOW.js。
WOW.js 依赖 animate.css，所以它支持 animate.css 多达 60 多种的动画效果，能满足您的各种需求。
html引用方式：
<div class="row wow fadeInUp" data-wow-duration="1s" data-wow-delay="1s">
js的引用方式：
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">
</script>
<script src="js/bootstrap.min.js">
</script>
<script src="js/wow.min.js">
</script>
<script>
$(function(){new WOW().init();})
</script>
.page1-title{
animation-duration: 2s;//一次播放动画的时间
animation-delay: 0s;//延迟多久开始播放动画
animation-iteration-count: 1;//动画播放多少次（infinite代表无限循环）
}
筱航科技主营业务： 长春网站建设 - 长春网站制作 -长春网站设计 -长春网站开发 -长春网站优化 -长春网站SEO - 长春网站推广 - 长春网络营销 - 长春网站关键词排名 -长春微信小程序 -长春微信商城 -长春分销商城
扫一扫，关注我们
声明：本文由【筱航科技】编辑上传发布，转载此文章须经作者同意，并请附上出处【筱航科技】及本页链接。如内容、图片有任何版权问题，请联系我们进行处理。
187
