项目需要,自己写了个demo

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
<title></title>
<link rel="stylesheet" href="./lib/swiper/swiper.css">
<link rel="stylesheet" href="./lib/swiper/swiper.animate/animate.css">
<style type="text/css">
*{
margin:0;
padding:0;
}
html,body{
height: 100%;
font-family: arial,helvetica;
}
.swiper-container {
width: 100%;
height: 100%;
text-align: center;
} #slide1{
background: #BFDA00;
} #slide2{
background: #2C3E50;
} #slide3{
background: #AC4F2C;
} .mySpan{
width:60px;
height:60px;
}
.pic1{
position:absolute;
top: 200px;
left: 60px;
background: url(./img/gaugin.jpg);
}
.pic2{
position:absolute;
top: 80px;
left: 150px;
background: url(./img/giotto.jpg);
}
.pic3{
position:absolute;
top: 180px;
right: 40px;
background: url(./img/leonardo.jpg);
}
.pic4{
position:absolute;
top:230px;
right:80px;
background: url(./img/warhol.jpg);
}
</style>
</head>
<body>
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide" id="slide1">
<p class="ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="1s" swiper-animate-delay="0.3s">内容</p>
<span class="ani mySpan pic1" swiper-animate-effect="bounceInLeft" swiper-animate-duration="1s" swiper-animate-delay="0.3s"></span>
<span class="ani mySpan pic2" swiper-animate-effect="bounceInRight" swiper-animate-duration="1.2s" swiper-animate-delay="0.5s"></span>
<span class="ani mySpan pic3" swiper-animate-effect="bounceInDown" swiper-animate-duration="1.3s" swiper-animate-delay="0.4s"></span>
<span class="ani mySpan pic4" swiper-animate-effect="bounceInUp" swiper-animate-duration="1.6s" swiper-animate-delay="0.2s"></span>
</div>
<div class="swiper-slide" id="slide2">
</div>
<div class="swiper-slide" id="slide3">
</div>
</div>
</div> <script type="text/javascript" src="./lib/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="./lib/swiper/swiper.jquery.min.js"></script>
<script type="text/javascript" src="./lib/swiper/swiper.animate/swiper.animate1.0.2.min.js"></script>
<script type="text/javascript">
var mySwiper = new Swiper ('.swiper-container', {
direction: 'vertical',
loop: false,
grabCursor: true,
roundLengths : true,
freeMode: false,
effect:"slide",
resistanceRatio : 0,
onInit: function(swiper){ //Swiper2.x的初始化是onFirstInit
swiperAnimateCache(swiper); //隐藏动画元素
swiperAnimate(swiper); //初始化完成开始动画
},
onSlideChangeEnd: function(swiper){
swiperAnimate(swiper); //每个slide切换结束时也运行当前slide动画
}
})
</script>
</body>
</html>

API

http://www.swiper.com.cn/usage/animate/index.html

微信网页动画---swiper.animate.css的更多相关文章

  1. css3动画和animate.css动画库使用

    CSS3动画 css3动画可以分为两种.transition过渡动画和keyframes关键帧动画 过渡动画 第一种叫过渡(transition)动画,就是从初始状态过渡到结束状态这个过程中所产生的动 ...

  2. CSS3动画框架 Animate.css

    CSS3的动画应用越来越多了,Animate.css一个从名字上就知道干什么的动画框架. github上的访问地址:http://daneden.github.io/animate.css/ 使用方法 ...

  3. 动画利器animate.css

    使用过CSS3编写动画的同学一定感叹CSS3的强大,但是也会感到书写的麻烦.每次都要计算动画的各个参数,十分麻烦.有没有一个库能封装一些常用的CSS3动画效果.答案是肯定的,animate.css就是 ...

  4. vue 动画框架Animate.css @keyframes

    <script src="vue.js"></script> <link rel="stylesheet" href=" ...

  5. css 动画类库Animate.css

    地址为:http://daneden.github.io/animate.css/ 源码地址为:https://github.com/daneden/animate.css 简单的使用方法: Anim ...

  6. CSS--使用Animate.css制作动画效果

    一 使用Animate.css动画 // 通过@import引入外部CSS资源; // 引入线上图片及JS文件; // 通过更改CSS类名生成不同类型的CSS3动画;   <!DOCTYPE h ...

  7. Animate.css介绍

    Animate.css简介 animate.css 动画库,预设了抖动(shake).闪烁(flash).弹跳(bounce).翻转(flip).旋转(rotateIn/rotateOut).淡入淡出 ...

  8. python 全栈开发,Day58(bootstrap组件,bootstrap JavaScript 插件,后台模板,图表插件,jQuery插件库,Animate.css,swiper,运行vue项目)

    一.bootstrap组件 无数可复用的组件,包括字体图标.下拉菜单.导航.警告框.弹出框等更多功能. 组件和插件的区别? 插件:一个功能,比如js文件 组件:html css js 组件包含插件 面 ...

  9. swiper.animate~之~可以执行两种动画的升级版的Swiper Animate

        1.下载插件swiper.animate-twice.min.js,加载进页面. <!DOCTYPE html> <html> <head> ... < ...

随机推荐

  1. UTC时间与北京时间

    经常混淆于此,特地研究了一下,记录在此以备忘. 整个地球分为二十四时区,每个时区都有自己的本地时间.在国际无线电通信场合,为了统一起见,使用一个统一的时间,称为通用协调时(UTC, Universal ...

  2. web_custom_request和web_submit_data

    网络上很多说明这2个函数区别的文章,我就从其他摘抄了内容,其中区别自己查看附录,我主要说明2点 (1)用web_custom_request提交请求如果是json,则会会使用关键字符{},但是{},是 ...

  3. js 时间处理函数 获取今天的前几天和后几天的任意一天

      var now = new Date(); let today = now.getFullYear() + '-' + (now.getMonth() + 1) + '-' + now.getDa ...

  4. 开源自己实现一个.net rpc框架 - Machete.Rpc

    Machete.Rpc Machete.Rpc 是一个轻量级的Rpc(远程过程调用的)框架.底层代理使用了Emit提高了效率,底层通信采用DotNetty框架以提升通信的效率.目前正在逐步完善中. G ...

  5. javascript中对象访问自身属性的方式

    在javascript中,通过对象的方法访问对象自身属性时,必须采用this.fieldName的方式. 原因是javascript中Function是无状态的,访问对象的属性时,必须指定当前的上下文 ...

  6. iOS 数组和字典排序

    一.数组排序 数组排序方式1: //初始化可变数组 NSMutableArray *arr1=[NSMutableArray arrayWithObjects:@"giu",@&q ...

  7. AND Graph CodeForces - 987F(思维二进制dfs)

    题意:给出n(0≤n≤22)和m,和m个数ai,1 ≤ m ≤ 2n ,0≤ai<2n ,把ai & aj == 0 的连边,求最后有几个连通块 解析:一个一个去找肯定爆,那么就要转换一 ...

  8. MT【156】特例$a_n=\dfrac{6}{\pi n^2}$

    设无穷非负数列$\{a_n\}$满足$a_n+a_{n+2}\ge2 a_{n+1},\sum\limits_{i=1}^{n}{a_i}\le1$,证明:$0\le a_n-a_{n+1}\le\d ...

  9. GPU并行编程小结

    http://peghoty.blog.163.com/blog/static/493464092013016113254852/ http://blog.csdn.net/augusdi/artic ...

  10. Vue设置页面的title

    原文地址:http://www.cnblogs.com/JimmyBright/p/7410771.html 前端框架如Vue.React等都是单页面的应用,也就是说整个web站点其实都是一个inde ...