1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title></title>
  6.         <link rel="stylesheet" type="text/css" href="css/animate.css"/>
  7.         <style type="text/css">
  8.             .div1{
  9.                 width: 300px;
  10.                 height: 300px;
  11.                 background: skyblue;
  12.                 margin: 10 auto;
  13.             }
  14.         </style>
  15.     </head>
  16.     <body>
  17.         <div class="div1 wow bounceIn">
  18.  
  19.         </div>
  20.         <div class="div1 wow bounceIn">
  21.  
  22.         </div>
  23.         <div class="div1 wow bounceIn">
  24.  
  25.         </div>
  26.         <div class="div1 wow bounceIn">
  27.  
  28.         </div>
  29.         <div class="div1 wow bounceIn">
  30.  
  31.         </div>
  32.         <div class="div1 wow bounceIn">
  33.  
  34.         </div>
  35.         <div class="div1 wow bounceIn">
  36.  
  37.         </div>
  38.         <div class="div1 wow bounceIn">
  39.  
  40.         </div>
  41.  
  42.         <!--
  43.             持续时间/延迟时间/偏移值/迭代次数
  44.         -->
  45.         <div class="div1 wow slideInLeft" data-wow-duration="2s" data-wow-delay="5s"></div>
  46.         <div class="div1 wow slideInRight" data-wow-offset="10"  data-wow-iteration="10"></div>
  47.  
  48.         <script src="js/wow.js" type="text/javascript" charset="utf-8"></script>
  49.         <script type="text/javascript">
  50.             var obj = {
  51.                 boxClass: 'wow',
  52.                 animateClass: 'animated',
  53.                 offset: 0,
  54.                 mobile: true,
  55.                 live: true
  56.             }
  57.             new WOW(obj).init();
  58.  
  59. //属性/方法    类型    默认值    说明
  60. //boxClass    字符串    ‘wow’    ‘wow’需要执行动画的元素的 class
  61. //animateClass    字符串    ‘animated’    ‘animated’animation.css 动画的 class
  62. //offset    整数    0    距离可视区域多少开始执行动画
  63. //mobile    布尔值    true    是否在移动设备上执行动画
  64. //live    布尔值    true    异步加载的内容是否有效
  65.         </script>
  66.     </body>
  67. </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. Flutter免费（视频）教程汇总

    Flutter学习导航 Flutter简介: Flutter可以轻松快速地构建漂亮的移动应用程序. Flutter是谷歌的移动应用SDK,用于短时间内在iOS和Android上制作高质量的原生界面应用 ...

  2. Emacs 笔记二

    Emacs 笔记二 Table of Contents 1. 前言 2. emacs基本操作(常用快捷键) 3. emacs模式讲解 4. emacs缓冲区 5. org mode 5.1. 列表 5 ...

  3. Docker运行mysql,redis,oracle容器和SpringBoot项目

    dokcer运行SpringBoot项目 from frolvlad/alpine-oraclejdk8:slim VOLUME /tmp ADD target/demo-0.0.1-SNAPSHOT ...

  4. Scrapy项目 - 实现腾讯网站社会招聘信息爬取的爬虫设计

    通过使Scrapy框架,进行数据挖掘和对web站点页面提取结构化数据,掌握如何使用Twisted异步网络框架来处理网络通讯的问题,可以加快我们的下载速度,也可深入接触各种中间件接口,灵活的完成各种需求 ...

  5. Multiple types were found that match the controller named 'Auth'.

    偶然的一个机会,修改了已经开发完毕的一个项目的命名.突然运行发现: { "Message": "An error has occurred.", "E ...

  6. Knative 实战：基于 Knative Serverless 技术实现天气服务-上篇

    提到天气预报服务,我们第一反应是很简单的一个服务啊,目前网上有大把的天气预报 API 可以直接使用,有必要去使用 Knative 搞一套吗?杀鸡用牛刀?先不要着急,我们先看一下实际的几个场景需求: 场 ...

  7. 每个人都要学的图片压缩终极奥义，有效解决 Android 程序 OOM

    # 由来 在我们编写 Android 程序的时候,几乎永远逃避不了图片压缩的难题.除了应用图标之外,我们所要显示的图片基本上只有两个来源: 来自网络下载 本地相册中加载 不管是网上下载下来的也好,还是 ...

  8. layDate——设置最大日期不能超过当前日期

    例如,当前年份是2018年,实现效果如下,2018年之后年份不可操作: 具体代码实现: layui.use([ 'laydate'], function () { var laydate = layu ...

  9. 遇见Python

    开发: 开发语言:    1.高级语言:Python  Java.PHP    C#    Go  ruby C++...    ===> 字节码    2.低级语言:C.汇编          ...

  10. SSM相关知识

    1.SpringMVC的工作流程? 1. 用户发送请求至前端控制器DispatcherServlet 2. DispatcherServlet收到请求调用HandlerMapping处理器映射器. 3 ...