<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <link rel="stylesheet" type="text/css" href="css/animate.css"/>

        <style type="text/css">

            .div1{

                width: 300px;

                height: 300px;

                background: skyblue;

                margin: 10 auto;

            }

        </style>

    </head>

    <body>

        <div class="div1 wow bounceIn">

        </div>

        <div class="div1 wow bounceIn">

        </div>

        <div class="div1 wow bounceIn">

        </div>

        <div class="div1 wow bounceIn">

        </div>

        <div class="div1 wow bounceIn">

        </div>

        <div class="div1 wow bounceIn">

        </div>

        <div class="div1 wow bounceIn">

        </div>

        <div class="div1 wow bounceIn">

        </div>

        <!--

            持续时间/延迟时间/偏移值/迭代次数

        -->

        <div class="div1 wow slideInLeft" data-wow-duration="2s" data-wow-delay="5s"></div>

        <div class="div1 wow slideInRight" data-wow-offset="10"  data-wow-iteration="10"></div>

        <script src="js/wow.js" type="text/javascript" charset="utf-8"></script>

        <script type="text/javascript">

            var obj = {

                boxClass: 'wow',

                animateClass: 'animated',

                offset: 0,

                mobile: true,

                live: true

            }

            new WOW(obj).init();

//属性/方法    类型    默认值    说明

//boxClass    字符串    ‘wow’    ‘wow’需要执行动画的元素的 class

//animateClass    字符串    ‘animated’    ‘animated’animation.css 动画的 class

//offset    整数    0    距离可视区域多少开始执行动画

//mobile    布尔值    true    是否在移动设备上执行动画

//live    布尔值    true    异步加载的内容是否有效

        </script>

    </body>

</html>

animate.html的更多相关文章

  1. animate.css（第三方动画使用方法）

    p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 17.0px Monaco; color: #a5b2b9 } animation 语法: animatio ...

  2. JavaScript权威设计--jQuery,Ajax.animate,SVG(简要学习笔记二十)[完结篇]

    1.$和jquery在全局命名空间中定义的唯一两个变量.   2.jquery是工厂函数,不是构造函数.他返回一个新创建的对象.   3.jquery的四种调用方式:     <1>传递C ...

  3. 原生javascript 实现 animate

    原生javascript 实现 animate //animate function getstyle(obj,name){ if(obj.currentStyle){ return obj.curr ...

  4. jQuery中Animate进阶用法（一）

    jQuery中animate的用法你了解多少呢?如果仅仅是简单的移动位置,显示隐藏,哦!天哪你在浪费资源!因为animate太强大了,你可以有很多意想不到的用法!让我们一起研究一下吧~~ 首先要了解j ...

  5. 简单animate方法的封装

    function animate(ele,json,fn){ clearInterval(ele.timer); ele.timer = setInterval(function () { var b ...

  6. jquery的animate({})动画整理

    在网页制作的过程中少不了用到各种动画,形式多种多样,flash,css,js,canvas,等等都能实现,对于其优劣和效果只能说各有千秋. 什么是动画效果,其实网页中的渐变效果就是一种很基础的动画,动 ...

  7. 使用jQuery的animate方法制作滑动菜单

    周末看Ziv小威的博客<制作滑动条菜单,如何延时处理滑动效果,避免动画卡顿>,参见地址:http://www.cnblogs.com/zivxiaowei/p/3462964.html.是 ...

  8. jquery animate 动画效果使用解析

    animate的意思是:使有生气:驱动:使栩栩如生地动作:赋予…以生命作为形容词:有生命的:活的:有生气的:生气勃勃的 先看动画效果:http://keleyi.com/keleyi/phtml/jq ...

  9. 【小贴士】关于transitionEnd/animate的一个有趣故事

    前言 在很久之前,我们项目有一个动画功能,功能本身很简单,便是典型的右进左出,并且带动画功能 以当时来说,虽然很简单,但是受限于框架本身的难度,就直接使用了CSS3的方式完成了功能 当时主要使用tra ...

  10. 网页返回顶部之animate方法

    点击返回顶部按钮,页面滑动形式回到顶部! HTML代码: <div id="ctop">回到<br>顶部</div> CSS代码: #ctop{ ...

随机推荐

  1. ubuntu13 eclipse菜单栏失效解决

    使用ubuntu13安装完eclipse和myeclipse后发现菜单栏单击时不显示下拉框只能通过快捷键显示. 百度了一下,找到以下解决办法. 打开终端运行下面的命令,打开eclipse后可正常显示菜 ...

  2. 设计模式——统一建模语言UML

    目录 一.UML的结构 1.1视图 1.2图 1.3模型元素 二.类图 2.1类与类图 2.2类之间的关系 三.序列图 3.1序列图定义 3.2序列图组成元素与绘制 四.状态图 4.1状态图定义 4. ...

  3. 什么是VR中的Locomotion？

    Locomotion,本文中我称之为移位,是VR研究中最重要的话题之一.因为它属于VR中三大元老级操作(Selection选择,Manipulation操纵物体,Locomotion移位),其中,前两 ...

  4. Mysql高手系列 - 第18篇：mysql流程控制语句详解（高手进阶）

    Mysql系列的目标是:通过这个系列从入门到全面掌握一个高级开发所需要的全部技能. 这是Mysql系列第18篇. 环境:mysql5.7.25,cmd命令中进行演示. 代码中被[]包含的表示可选,|符 ...

  5. PHP获取客户端的真实IP

    REMOTE_ADDR只能获取访问者本地连接中设置的IP,如中南民族大学校园网中自己设置的10.X.XXX.XXX系列IP,而这个函数获取的是局域网网关出口的IP地址, 如果访问者使用代理服务器,将不 ...

  6. android设置透明状态栏

    先是半透明效果(两种方法): 第一种(简单): //直接将下面的代码放在activity中的setContentView(R.layout.activity_main);中之前就行了 if (Buil ...

  7. LitePal的基本用法

    快速配置   1. 引入Jar包或源码 首先我们需要将LitePal的jar包引入到项目当中,可以点击这里查看LitePal的最新版本,选择你需要的下载即可.下载好了jar包之后,把它复制到项目的li ...

  8. Dubbo学习系列之十五（Seata分布式事务方案TCC模式）

    上篇的续集. 工具: Idea201902/JDK11/Gradle5.6.2/Mysql8.0.11/Lombok0.27/Postman7.5.0/SpringBoot2.1.9/Nacos1.1 ...

  9. Linux学习资料网站汇总链接（持续更新ing）

    排名不分先后. 学海无涯苦作舟. 博客: 1.slmba:LINUX博客原创大牛 2.edsionte's TechBlog:Linuxer (他的友情链接中还有一堆Linuxer,被公司屏蔽进不去. ...

  10. Windows系统调用中的现场保存

    Windows内核分析索引目录:https://www.cnblogs.com/onetrainee/p/11675224.html Windows系统调用中的现场保存 我们之前介绍过三环进零环的步骤 ...