专栏首页Alone88分享:通过Animate 和wow.js 快速制作你的网页特效

分享:通过Animate 和wow.js 快速制作你的网页特效

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 二进制学习系列-栈溢出之libc利用

    经典文章:https://segmentfault.com/a/1190000005888964#articleHeader3

    安恒网络空间安全讲武堂
  • 珍藏多年的 Git 问题和操作清单

    本文整理自工作多年以来遇到的所有 Git 问题汇总,之前都是遗忘的时候去看一遍操作,这次重新整理了一下,发出来方便大家收藏以及需要的时候查找答案。

    coder_koala
  • 源码编译 GitLab Runner

    本文使用「署名 4.0 国际 (CC BY 4.0)」许可协议,欢迎转载、或重新修改使用,但需要注明来源。 署名 4.0 国际 (CC BY 4.0)

    soulteary
  • 【github】论怎么去写一个高大上的ReadMe

    以前我时常觉得,自己写的ReadMe很单调乏味,但后来仔细研究一下后,发现有很多方式可以让ReadMe在简洁的基础上变得好看些,所以在这里和大家分享,如果大家有...

    外婆的彭湖湾
  • 用Python处理PDF

    PDF作为可移植文档格式(Portable Document Format),在日常生活中经常接触到,最近处理一些数据更是频繁接触一些需要批量处理pdf文件的需...

    蛰虫始航
  • 如何配置 GitLab 使用 HTTPS

    本文使用「署名 4.0 国际 (CC BY 4.0)」许可协议,欢迎转载、或重新修改使用,但需要注明来源。 署名 4.0 国际 (CC BY 4.0)

    soulteary
  • CTF论剑场 Web14-21 WriteUp

    根据hint信息可以猜测为 /.git/敏感文件泄露,该目录下包含了所有 git 正常工作所需要的信息。 使用 GitHack工具(项目地址:https://...

    安恒网络空间安全讲武堂
  • idea切换git分支

    用户4478423
  • 使用abapGit在ABAP On-Premises系统和SAP云平台ABAP环境之间进行代码传输

    SAP ABAP顾问朋友们,应该都使用过SAPLink这个工具。如果两个ABAP Netweaver系统没有建立起传输路径时,我们无法使用标准的SE10事务码创...

    Jerry Wang
  • (七十二)c#Winform自定义控件-雷达图

    GitHub:https://github.com/kwwwvagaa/NetWinformControl

    冰封一夏

扫码关注云+社区

领取腾讯云代金券