项目需要，自己写了个demo

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
  6.     <title></title>
  7.     <link rel="stylesheet" href="./lib/swiper/swiper.css">
  8.     <link rel="stylesheet" href="./lib/swiper/swiper.animate/animate.css">
  9.     <style type="text/css">
  10.         *{
  11.             margin:0;
  12.             padding:0;
  13.         }
  14.         html,body{
  15.             height: 100%;
  16.             font-family: arial,helvetica;
  17.         }
  18.         .swiper-container {
  19.             width: 100%;
  20.             height: 100%;
  21.             text-align: center;
  22.         }
  23.  
  24.         #slide1{
  25.             background: #BFDA00;
  26.         }
  27.  
  28.         #slide2{
  29.             background: #2C3E50;
  30.         }
  31.  
  32.         #slide3{
  33.             background: #AC4F2C;
  34.         }
  35.  
  36.         .mySpan{
  37.             width:60px;
  38.             height:60px;
  39.         }
  40.         .pic1{
  41.             position:absolute;
  42.             top: 200px;
  43.             left: 60px;
  44.             background: url(./img/gaugin.jpg);
  45.         }
  46.         .pic2{
  47.             position:absolute;
  48.             top: 80px;
  49.             left: 150px;
  50.             background: url(./img/giotto.jpg);
  51.         }
  52.         .pic3{
  53.             position:absolute;
  54.             top: 180px;
  55.             right: 40px;
  56.             background: url(./img/leonardo.jpg);
  57.         }
  58.         .pic4{
  59.             position:absolute;
  60.             top:230px;
  61.             right:80px;
  62.             background: url(./img/warhol.jpg);
  63.         }
  64.     </style>
  65. </head>
  66. <body>
  67.     <div class="swiper-container">
  68.         <div class="swiper-wrapper">
  69.             <div class="swiper-slide" id="slide1">
  70.                 <p class="ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="1s" swiper-animate-delay="0.3s">内容</p>
  71.                 <span class="ani mySpan pic1" swiper-animate-effect="bounceInLeft" swiper-animate-duration="1s" swiper-animate-delay="0.3s"></span>
  72.                 <span class="ani mySpan pic2" swiper-animate-effect="bounceInRight" swiper-animate-duration="1.2s" swiper-animate-delay="0.5s"></span>
  73.                 <span class="ani mySpan pic3" swiper-animate-effect="bounceInDown" swiper-animate-duration="1.3s" swiper-animate-delay="0.4s"></span>
  74.                 <span class="ani mySpan pic4" swiper-animate-effect="bounceInUp" swiper-animate-duration="1.6s" swiper-animate-delay="0.2s"></span>
  75.             </div>
  76.             <div class="swiper-slide" id="slide2">
  77.             </div>
  78.             <div class="swiper-slide" id="slide3">
  79.             </div>
  80.         </div>
  81.     </div>
  82.  
  83.     <script type="text/javascript" src="./lib/jquery-1.11.3.min.js"></script>
  84.     <script type="text/javascript" src="./lib/swiper/swiper.jquery.min.js"></script>
  85.     <script type="text/javascript" src="./lib/swiper/swiper.animate/swiper.animate1.0.2.min.js"></script>
  86.     <script type="text/javascript">
  87.         var mySwiper = new Swiper ('.swiper-container', {
  88.             direction: 'vertical',
  89.             loop: false,
  90.             grabCursor: true,
  91.             roundLengths : true,
  92.             freeMode: false,
  93.             effect:"slide",
  94.             resistanceRatio : 0,
  95.             onInit: function(swiper){ //Swiper2.x的初始化是onFirstInit
  96.                 swiperAnimateCache(swiper); //隐藏动画元素
  97.                 swiperAnimate(swiper); //初始化完成开始动画
  98.             },
  99.             onSlideChangeEnd: function(swiper){
  100.                 swiperAnimate(swiper); //每个slide切换结束时也运行当前slide动画
  101.             }
  102.         })
  103.     </script>
  104. </body>
  105. </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. Three.js入门篇（一）创建一个场景

    上一面讲述了向场景中添加物体对象.这一篇准备把每个功能点细细的讲述一遍,一方面是为了加深自己的理解.另一方面希望能够 帮助到有需要的人. 一.在学习WEBGL的时候,你应该先了解要创建一个WebGL程 ...

  2. jQ返回定位插件

    一.jQuery 提供开发者开发插件的几种模式 1.$.extend();     //这个方法是绑定在$上面的.可以通过$直接调用 2.$.fn.方法名     //这个方法是绑定在Dom对象上面的 ...

  3. Java并发编程之线程生命周期、守护线程、优先级、关闭和join、sleep、yield、interrupt

    Java并发编程中,其中一个难点是对线程生命周期的理解,和多种线程控制方法.线程沟通方法的灵活运用.这些方法和概念之间彼此联系紧密,共同构成了Java并发编程基石之一. Java线程的生命周期 Jav ...

  4. Windows安装ElastAlert问题总结

    1.运行时出现UnicodeDecodeError: ‘ascii’ codec can’t decode byte 0xb4 in position 0: invalid start byte 或  ...

  5. iOS 代码片段的添加!

    说明.代码片段就是方便快捷输入的片段,类似do -while.switch等这些系统语句,这些系统的语句也是代码片段,快速输入一些常用的代码语句,就可以把这些语句写成代码片段! Example: 我们 ...

  6. 【uoj#315/bzoj4943】[NOI2017]蚯蚓排队 Hash

    题目描述 给出 $n$ 个字符,初始每个字符单独成字符串.支持 $m$ 次操作,每次为一下三种之一: $1\ i\ j$ :将以 $i$ 结尾的串和以 $j$ 开头的串连到一起. $2\ i$ :将 ...

  7. Win10系统 安装Anaconda+TensorFlow+Keras

    小白一枚,安装过程走了很多坑,前前后后安装了好几天,因此记录一下. 一.安装anaconda 官方下载地址:https://repo.continuum.io/archive/ 选项相应的版本安装,我 ...

  8. P2129 L国的战斗续之多路出击

    题目描述 这一次,L国决定军队分成n组,分布在各地,若以L国为原点,可以看作在一个直角坐标系内.但是他们都受统一的指挥,指令部共发出m个命令.命令有移动.上下转移和左右转移(瞬移??),但是由于某些奇 ...

  9. vyos User Guide

    vyos User Guide 来源 https://wiki.vyos.net/wiki/User_Guide The VyOS User Guide is focused on providing ...

  10. BZOJ 1036 树的统计 | 树链剖分模板题

    又做了一遍--去掉读入优化只有八十行~ #include <cstdio> #include <cstring> #include <algorithm> usin ...