动画插件—animate.css

    xiaoxiao2021-03-25  220

    下载插件:animate下载

    1. 页面引入插件

    在你的index.html页面中引入这两个文件

    <link rel="stylesheet" href="lib/animate/animate.css"> <script src="lib/animate/wow.min.js"></script>

    2.写js代码

    在js中写下面这句:

    $(function(){ //动画效果 new WOW().init(); });

    3. 在html页面中添加动画

    在index.html页面中找到需要添加动画效果的对象。如果是一大块内容,就直接找最靠近它并且包围它的大盒子,给盒子添加类:class="wow 动画效果",具体参考下面代码:

    bounce是动画效果,根据自己需要添加效果,参考:animate.css各种动画效果

    <nav class="wow bounce"></nav> 你也可以添加一个或几个属性如下: <nav class="wow bounce" data-wow-duration="2s" data-wow-delay="5s" data-wow-offset="10" data-wow-iteration="10"></nav>

    属性: data-wow-duration=”2s” 即:动画用2秒钟执行完。 data-wow-delay=”5s” 即:动画延迟5秒执行。 data-wow-offset=”10” 即: 距离可视区多远开始执行动画。 data-wow-iteration=”10” 即:重复次数。

    转载请注明原文地址: https://ju.6miu.com/read-12404.html

    最新回复(0)