分享:通过Animate 和wow.js 快速制作你的网页特效
分享:通过Animate 和wow.js 快速制作你的网页特效
Alone88
发布于 2019-10-22 17:08:34
发布于 2019-10-22 17:08:34
文章被收录于专栏：Alone88
Animate 和wow.js
Animate 通过CSS3封装的一个css插件 wow.js 可以链接到CSS动画库 两者配合起来可以快速制作你的网页特效
安装
wowjs安装 通过CDN
<script src="https://cdn.bootcss.com/wow/1.1.2/wow.js"></script><link href="https://cdn.bootcss.com/animate.css/3.7.0/animate.css" rel="stylesheet">也可以直接下载出来到本地 wowjs github地址https://github.com/matthieua/WOW Animate github地址:https://github.com/daneden/animate.css
使用
通过CDN连接wow和animate后,需要通过js激活wow
new WOW().init()然后添加wow样式到你要进行动画的标签
<div class="wow">
动画的内容
</div>
<!-- 选择Animate动画 -->
<!--wow样式激活wowjs插件, bounceInUp 是Animate的动画样式,更多样式可以到https://daneden.github.io/animate.css/看-->
<div class"wow bounceInUp">
动画的内容
</div>wow高级选项
data-wow-duration: 更改动画持续时间，单位秒s data-wow-delay: 动画开始前的延迟,单位秒s data-wow-offset: 开始动画的距离（与浏览器底部相关） data-wow-iteration:动画的次数重复 这个可以直接添加到标签里设置
<div class="wow bounceInUp" data-wow-duration='1s' data-wow-delay="1s" data-wow-offset="10" data-wow-iteratio="10">
动画的内容
</div>更多教程可以参考他们的Github
本文由 Alone88 创作，采用 知识共享署名4.0 国际许可协议进行许可 本站文章除注明转载/出处外，均为本站原创或翻译，转载前请务必署名 最后编辑时间为: Mar 8, 2019 at 02:26 pm
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录
相关产品与服务
内容分发网络 CDN
内容分发网络（Content Delivery Network，CDN）通过将站点内容发布至遍布全球的海量加速节点，使其用户可就近获取所需内容，避免因网络拥堵、跨运营商、跨地域、跨境等因素带来的网络不稳定、访问延迟高等问题，有效提升下载速度、降低响应时间，提供流畅的用户体验。
腾讯云开发者
