Animate插件库 WOW.js插件

第一步. Animate插件库

Animate.css内置了很多典型的css3动画,兼容性好使用方便 地址：Redirecting to Animate.csshttps://daneden.github.io/animate.css/

演示地址：Animate.css 一款强大的预设css3动画库Animate.css内置了很多典型的css3动画，兼容性好使用方便。http://www.jq22.com/yanshi819

下载地址：https://www.jq22.com/demo/Animate201707101048/animate.min.css

使用方式

第一步：使用link将css文件引入

第二步：选择样式添加 <div class="animated fadeInLeft">从左边进入页面位置 animated 里面定义了动画执行的时间 fadeInLeft 中定义了动画的样式 </div >

<!-- 引入css样式 --> <link rel="stylesheet" href="https://www.jq22.com/demo/Animate201707101048/animate.min.css"> <!-- 调用css样式 --> <div class='animated shake'>hello world</div>

第二步.WOW.js插件

效果参考资料：WOW.js演示_dowebokhttp://www.dowebok.com/demo/131/

使用参考资料：https://www.cnblogs.com/front-Q/p/9006878.htmlhttps://www.cnblogs.com/front-Q/p/9006878.html

 第三步

1. 引入对应的js文件

2. <script src="./wow.min.js"></script>

   第四步初始化js代码

44

<script type="text/javascript"> new WOW().init(); </script>

1. 第五步给对应的动画添加wow效果

<div class="wow slideInLeft" data-wow-duration="2s"   data-wow-iteration="1">hello</div>

<div class="wow slideInLeft" data-wow-duration="2s" data-wow-iteration="1">hello</div>

注意：animated需要修改为wow, data-wow-duration动画执行的时间 data-wow-iteration循环的次数 data-wow-delay="5s" 延迟的时间 data-wow-offset="10" 偏移值

1. 总结：CSS3

CSS3选择器，CSS3实现圆角（border-radius），阴影（box-shadow），对文字加特效（text-shadow），线性渐变（gradient），2D变形（transform），3D效果，animate动画，媒体查询，多栏布局，弹性盒子