下载、安装、使用与解析Animate.css动画库。

引入插件

1

2

3

4

animate动画库的cdn地址：

简单粗暴的下载方法：复制cdn地址，对源码直接复制，保存到记事本，并更改文件名称为animate.css

将下载好的animate动画文件添加到自己的项目中，并全局配置使用（common 是自定义文件夹）

1

2

/*引入自定义动画库 animate.css*/

@import "/common/animate.min.css";

使用animate动画库 ： animated + 动画

1

2

哈萨克激动啥肯定会进口的哈萨克记得哈卡斯

肯定会进口的哈萨克记得哈卡斯

效果展示：

宝典秘籍：Animate动画库所有动画样式

Class Name

效果

Class Name

效果

bounce

上下弹跳

flash

闪烁

pulse

脉冲

rubberBand

橡皮筋式拉动

shake

摇晃

headShake

也是摇动

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

x轴弹出

flipInY

y轴弹出

flipOutX

x轴弹入

flipOutY

y轴弹入

lightSpeedIn

快速拉出(附带菱形效果)

lightSpeedOut

快速拉入(附带芾菱形效果)

rotateIn

旋转弹出

rotateInDownLeft

上至下左侧旋转弹入

rotateInDownRight

上至下右侧旋转弹入

rotateInUpLeft

下至上左侧旋转弹入

rotateInUpRight

下至上右侧旋转弹入

rotateOut

旋转弹出

rotateOutDownLeft

上至下左侧旋转弹出

rotateOutDownRight

上至下右侧旋转弹出

rotateOutUpLeft

下至上左侧旋转弹出

rotateOutUpRight

下至上右侧旋转弹出

hinge

落叶式弹出

jackInTheBox

侧身弹出

rolIn

左侧向右滚入

rollOut

向右滚出

zoomIn

缓慢弹入

zoomInDown

下拐弯弹入(赞个)

zoomInLeft

左拐弯弹入

zoomInRight

右拐弯弹入

zoomInUp

上拐弯弹入

zoomOut

弹出

zoomOutDown

下拐弯弹出

zoomOutLeft

左拐弯弹出

zoomOutRight

右拐弯弹出

zoomOutUp

上拐弯弹出

slideInDown

向下侧拉入

slideInLeft

左侧拉入

slideInRight

右侧拉入

slideInUp

向上拉入

slideOutDown

向下拉出

slideOutLeft

向左拉出

slideOutRight

向右拉出

sideoutUp

向上拉出

官方演示地址：http://www.jq22.com/yanshi819

—2024-07-25，jaggf摘录

Previous

《你想活出怎样的人生》