<!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. Kafka系列二之部署与使用

    Kafka部署与使用 写在前面 从上一篇Kafka的架构介绍和安装中,可能,你还一直很蒙,kafka到底该怎么使用呢?接下来,我们就来介绍Kafka的部署与使用.上篇文章中我们说到,Kafka的几个重 ...

  2. layer.open打开一个新的jsp页面,如何关闭并刷新父页面问题

    layer.open打开一个新的jsp页面弹框,如何关闭呢? 在新的页面提交完毕之后,关闭并刷新父页面列表. layer.closeAll(); parent.layer.closeAll(); wi ...

  3. 玩转 SpringBoot 2 之整合 JWT 上篇

    前言 该文主要带你了解什么是 JWT,以及JWT 定义和先关概念的介绍,并通过简单Demo 带你了解如何使用 SpringBoot 2 整合 JWT. 介绍前在这里我们来探讨一下如何学习一门新的技术, ...

  4. Linux——服务器版本安装 (VMware)

    一.Linux简介 Linux是一套免费使用和自由传播的类UNIX操作系统,是一个基于POSIX和UNIX的多用户.多任务.支持多线程和多CPU的操作系统.它能运行主要的UNIX工具软件.应用程序和网 ...

  5. 【集群监控】Docker上部署Prometheus+Alertmanager+Grafana实现集群监控

    Docker部署 下载 sudo yum-config-manager --add-repo https://download.docker.com/linux/centos/docker-ce.re ...

  6. K8s 从懵圈到熟练 – 镜像拉取这件小事

    作者 | 声东 阿里云售后技术专家 导读:相比 K8s 集群的其他功能,私有镜像的自动拉取,看起来可能是比较简单的.而镜像拉取失败,大多数情况下都和权限有关.所以,在处理相关问题的时候,我们往往会轻松 ...

  7. group by 如何合并字符串优化记?

    sqlserver 2005及以上版本 表(tb) id    value 1     aa 2     cc 3     bb 3     dd 4     aa 4     cc 4     dd ...

  8. jQuery插件编写学习中遇见的问题--attr prop

    个人博客: https://chenjiahao.xyz 最近在学习jQuery的插件的编写,有两种方式,$.fn.extend以及$.extend,一种是作用于对象原型上,一种是直接作用于jQuer ...

  9. .NetCore WebApi —— Swagger版本控制

    目录: .NetCore WebApi——Swagger简单配置 .NetCore WebApi——基于JWT的简单身份认证与授权(Swagger) .NetCore WebApi —— Swagge ...

  10. 我的Spring Boot学习记录(二):Tomcat Server以及Spring MVC的上下文问题

    Spring Boot版本: 2.0.0.RELEASE 这里需要引入依赖 spring-boot-starter-web 这里有可能有个人的误解,请抱着怀疑态度看. 建议: 感觉自己也会被绕晕,所以 ...