项目需要，自己写了个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. 编写wordcount程序

    一.程序概述 1.此次编写的程序为邹欣老师<构建之法>科书2.4.2 wordcount程序. 2.我写的wordcount程序要实现的功能整体可以总结为: ① 统计word文档中的字符数 ...

  2. maven导入项目时出现“Cannot read lifecycle mapping metadata …… invalid END header (bad central directory offset)pom”错误的解决方法

    出现该错误是因为jar包版本不匹配,比如linux上的jar包导入到windows上了.可以将.m2\repository的org.apache.maven.plugins删掉然后让maven重新下载 ...

  3. Beta阶段冲刺前的准备

    Beta阶段冲刺前的准备 凡事预则立,在Beta开始前,以小组为单位,在敏捷冲刺前发布一篇博客,描述: 1. 讨论组长是否重选的议题和结论 经过我们小组在周二下午的会议中有重新认真的考虑了是否要更换组 ...

  4. Robot Framework 教程 (6) - 使用条件表达式

    本篇文章,主要对如何在Robot Framework中使用条件表达式做过程控制作说明. 按照Robot Framework的官方文档介绍,Robot Framework并不建议在TestCase或Ke ...

  5. 微信小程序 功能函数picker-view的弹出模态

    <view class="list"> <form bindsubmit="formSubmit"> <view class=&q ...

  6. 域名DNS解析说明

    一直都对域名DNS 解析很懵逼,今天看到一个博客上面详细的介绍了域名解析. 特意记录下: 记录类型: A记录: 将域名指向一个IPv4地址(例如:8.8.8.8)CNAME:将域名指向另一个域名(例如 ...

  7. Qt 5.9.1 连 MYSQL 5.7数据库

    Qt程序报错: QSqlDatabase: QMYSQL driver not loaded QSqlDatabase: available drivers: QSQLITE QMYSQL QMYSQ ...

  8. 【Learning】插头DP

    简介 插头DP(轮廓线DP)是用来解决网格图回路问题的一种算法. 插头DP解决的经典问题就是统计经过所有格子的哈密顿回路条数,某些格子有障碍. ​ 如果问题稍微进阶一点的话,不一定要求路径是回路.路径 ...

  9. 【CF438E】小朋友和二叉树 解题报告

    [CF438E]小朋友和二叉树 Description ​ 我们的小朋友很喜欢计算机科学,而且尤其喜欢二叉树. ​ 考虑一个含有\(n\)个互异正整数的序列\(c_1,c_2,\dots,c_n\). ...

  10. 20135319zl elf文件报告

    一. 查看资料 使用vim /usr/include/elf.h可以查看elf文件头 二. 找到.text hexeditor po 地址为0x32,即第51字节储存的是elf header最后一个域 ...