Animate.css
- 官网
- 简介
Animate.css是一个纯CSS动画库，官方给出了70多种动画特效，使用简单 - cdn引入
<head> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css"> </head> - 使用
<h1 class="animated infinite bounce delay-2s">Example</h1> -
效果
-
更多特效
wow.js
- 官网
- 简介
WOW.js 是轻量级类库，只依赖Animate.css。不依赖其他js库。
WOW.js的主要功能是实现页面向下滚动的过程中，逐渐释放CSS动画效果。
也就是说，当我们向下滚动页面时，可以省去很多判断条件，让CSS动画逐渐展示出来。 - cdn引入
<script src="https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.js"></script> - 使用
仅需要在原来的基础上class加wow即可<img class="wow animated bounceInRight" width="100%" src="assets/img/m1.jpeg" alt=""> <script> new WOW().init(); </script> - example
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.js"></script> <style> div{margin:20px auto;height: 300px;width: 300px;background: #3a8ee6;} </style> </head> <body> <div class="wow animated bounceInRight"></div> <div class="wow animated bounceInLeft"></div> <div class="wow animated bounceInRight"></div> <div class="wow animated bounceInLeft"></div> <div class="wow animated bounceInRight"></div> <div class="wow animated bounceInLeft"></div> </body> <script> new WOW().init(); </script> </html> -
演示
- 文档
网友评论