css3动画Animate.css插件与wow.js插件

1.在https://www.awesomes.cn/repo/daneden/animate-css中下载文件(里面也有详细的用法)

2.插件描述：WOW.js 是一款帮助你实现滚动页面时触发CSS 动画效果的插件，去http://www.jq22.com/jquery-info1705查看使用

例如：

在页面的 <head>中引入样式文件：

<head>
<link rel="stylesheet" href="animate.min.css">
</head>

4.在class名中加入你想用的样式名

bounce
flash
pulse
rubberBand
shake
swing
tada
wobble
jello
bounceIn
bounceInDown
bounceInLeft
bounceInRight
bounceInUp
bounceOut
bounceOutDown
bounceOutLeft
bounceOutRight
bounceOutUp
fadeIn
fadeInDown
fadeInDownBig
fadeInLeft
fadeInLeftBig
fadeInRight
fadeInRightBig
fadeInUp
fadeInUpBig
fadeOut
fadeOutDown
fadeOutDownBig
fadeOutLeft
fadeOutLeftBig
fadeOutRight
fadeOutRightBig
fadeOutUp
fadeOutUpBig
flipInX
flipInY
flipOutX
flipOutY
lightSpeedIn
lightSpeedOut
rotateIn
rotateInDownLeft
rotateInDownRight
rotateInUpLeft
rotateInUpRight
rotateOut
rotateOutDownLeft
rotateOutDownRight
rotateOutUpLeft
rotateOutUpRight
hinge
rollIn
rollOut
zoomIn
zoomInDown
zoomInLeft
zoomInRight
zoomInUp
zoomOut
zoomOutDown
zoomOutLeft
zoomOutRight
zoomOutUp
slideInDown
slideInLeft
slideInRight
slideInUp
slideOutDown
slideOutLeft
slideOutRight
slideOutUp

5.如果不知道什么名称是什么效果，可以去https://daneden.github.io/animate.css/?看对应的效果，再使用

css3动画Animate.css插件与wow.js插件相关推荐

WOW.js插件使用
WOW.js插件使用 WOW.js插件使用不多说先看效果 WOW官网是不是觉得很有趣,这样小小的一款插件就能做出这么多动画效果. 一些小小的细节效果能为网站增色不少,下面就让我们来学习如何使用这款 ...
vue动画效果-定义动画帧过度效果集成第三方动画animate.css
1.定义动画帧 <template><div><button @click="isShow=!isShow">显示/隐藏</button& ...
页面打印插件 jquery.jqprint.js 插件使用实例
页面打印插件 jquery.jqprint.js 插件使用实例 jquery.jqprint.js 插件下载 jqprint 是一个基于jQuery编写的页面打印的一个小插件,可以对页面指定元素的内容 ...
VBS操作IE ---（【当不使用IE时】可以使用Chrome插件，自定义JS插件操作浏览器）
目录 ■前言 ■举个简单VBS操作IE的例子 --- ■如何让IE打开是IE,而不是Edge ■其他更多VBS相关・更多操作一览・按键 shift ctrl alt ・打开图片,以幻灯片形式显示 ...
vue中如何实现滚动页面的动画-animate.css和wow.js
两种方法: 第一种方法:npm安装包animate.css和wow.js 第二种方法:静态资源的引入第一种方法: 1.引入静态资源包静态资源包,需要注意的是.必须放到static文件夹下面 < ...
转场动画：动画效果 css 动画 animate.css
实现动画的方式 <template><button @click="show = !show">改变</button><!-- 1..cs ...
Wow.js插件实现上下滑动重复渐入效果
wow.js默认情况下只执行一次,如果想实现上下滑动,重复执行,则需要修改wow.js源码,如下: (function() {var MutationObserver, Util, WeakMap, ...
vue过渡动画Animate.css动画库(1)
一.前言: 在开发中,我们想要给一个组件的显示和消失添加某种过渡动画,可以很好的增加用户体验, Vue中为我们可以自定义过渡或动画或者Vue提供一些内置组件完成动画,利用它们我们可以方便的实现过渡动画 ...
html中animate动画,animate.css动画速度控制
5 个答案: 答案 0 :(得分:20) 您需要在animation-duration上定义.slideOutLeft: .slideOutLeft { -webkit-animation-name: ...
editer js 插件_各种Js插件汇总；JavaScript插件
1.jquery信息提示插件: https://blog.csdn.net/u013517229/article/details/78291841 http://www.jqueryfuns.com/ ...

css3动画Animate.css插件与wow.js插件

css3动画Animate.css插件与wow.js插件相关推荐

最新文章

热门文章