zoukankan      html  css  js  c++  java
  • animate.css的使用

    前面的话

      animate.css是一个使用CSS3的animation制作的动画效果的CSS集合,里面预设了很多种常用的动画,且使用非常简单。本文将详细介绍animate.css的使用

    引入

      animate.css的最新版本是3.5.2,引入animate.css很容易,有以下几种方法

      1、从官网下载

      https://raw.github.com/daneden/animate.css/master/animate.css

      2、通过npm安装

    $ npm install animate.css

      3、使用在线cdn

    https://unpkg.com/animate.css@3.5.2/animate.min.css

    效果演示

      animate.css的使用非常简单,因为它是把不同的动画绑定到了不同的类里,所以想要使用哪种动画,只需要把通用类animated和相应的类添加到元素上就行了

      下面来详细介绍animate.css里面的类,主要包括Attention(晃动效果)、bounce(弹性缓冲效果)、fade(透明度变化效果)、flip(翻转效果)、rotate(旋转效果)、slide(滑动效果)、zoom(变焦效果)、special(特殊效果)这8类

    【Attention(晃动效果)】

    复制代码
    bounce
    flash
    pulse
    rubberBand
    shake
    headShake
    swing
    tada
    wobble
    jello
    复制代码

      以在div上使用bounce为例

    <div class="animated bounce"></div>

    【bounce(弹性缓冲效果)】

    复制代码
    bounceIn
    bounceInDown
    bounceInLeft
    bounceInRight
    bounceInUp
    bounceOut
    bounceOutDown
    bounceOutLeft
    bounceOutRight
    bounceOutUp
    复制代码

    【fade(透明度变化效果)】

    复制代码
    fadeIn
    fadeInDown
    fadeInDownBig
    fadeInLeft
    fadeInLeftBig
    fadeInRight
    fadeInRightBig
    fadeInUp
    fadeInUpBig
    fadeOut
    fadeOutDown
    fadeOutDownBig
    fadeOutLeft
    fadeOutLeftBig
    fadeOutRight
    fadeOutRightBig
    fadeOutUp
    fadeOutUpBig
    复制代码

    【flip(翻转效果)】

    flip
    flipInX
    flipInY
    flipOutX
    flipOutY

    【rotate(旋转效果)】 

    复制代码
    rotateIn
    rotateInDownLeft
    rotateInDownRight
    rotateInUpLeft
    rotateInUpRight
    rotateOut
    rotateOutDownLeft
    rotateOutDownRight
    rotateOutUpLeft
    rotateOutUpRight
    复制代码

    【slide(滑动效果)】 

    复制代码
    slideInDown
    slideInLeft
    slideInRight
    slideInUp
    slideOutDown
    slideOutLeft
    slideOutRight
    slideOutUp
    复制代码

    【zoom(变焦效果)】

    复制代码
    zoomIn
    zoomInDown
    zoomInLeft
    zoomInRight
    zoomInUp
    zoomOut
    zoomOutDown
    zoomOutLeft
    zoomOutRight
    zoomOutUp
    复制代码

    【special(特殊效果)】 

    hinge
    rollIn
    rollOut
    lightSpeedIn
    lightSpeedOut

    实际应用

      在一般的使用中,直接在元素上添加animated和对应的类名即可

    复制代码
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="https://unpkg.com/animate.css@3.5.2/animate.min.css">
    <style>
    .box{height: 100px; 100px;background-color: lightblue}
    </style>
    </head>
    <body>
    <div class="box animated flash"></div>
    </body>
    </html>
    复制代码

      通过给JS添加或删除class,可以实现动态效果

    复制代码
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="https://unpkg.com/animate.css@3.5.2/animate.min.css">
    <style>
    .box{height: 100px; 100px;background-color: lightblue}
    </style>
    </head>
    <body>
    <button id="btn1">添加</button>
    <button id="btn2">移除</button>
    <div id="box" class="box"></div>
    <script>
    var oBtn1 = document.getElementById('btn1');
    var oBtn2 = document.getElementById('btn2');
    var oBox = document.getElementById('box');
    oBtn1.onclick = function(){
      oBox.classList.add('animated');
      oBox.classList.add('flash');
    }
    oBtn2.onclick = function(){
      oBox.classList.remove('flash');
    }
    </script>
    </body>
    </html>
    复制代码

      至于动画的配置参数,比如动画持续时间,动画的执行次数等等,可以在元素上自行定义,覆盖掉animate.css里面所定义的就行了 

    复制代码
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="https://unpkg.com/animate.css@3.5.2/animate.min.css">
    <style>
    .box{height: 100px; 100px;background-color: lightblue}
    .infinite{animation-iteration-count:infinite;}
    </style>
    </head>
    <body>
    <button id="btn1">添加循环的动画效果</button>
    <button id="btn2">移除</button>
    <div id="box" class="box"></div>
    <script>
    var oBtn1 = document.getElementById('btn1');
    var oBtn2 = document.getElementById('btn2');
    var oBox = document.getElementById('box');
    oBtn1.onclick = function(){
      oBox.classList.add('animated');
      oBox.classList.add('flash');
      oBox.classList.add('infinite');
    }
    oBtn2.onclick = function(){
      oBox.classList.remove('flash');
    }
    </script>
    </body>
    </html>
    复制代码

  • 相关阅读:
    洛谷P1434 滑雪
    P1855 榨取kkksc03
    C#中将表示颜色的string转换成Color
    DevExpress的对话框XtraMessageBox的使用
    Winform中怎样根据Name获取同窗体的控件
    Winform中使用代码编写Button按钮的点击事件
    SqlServer 2014还原数据库时提示:无法在已有的""上还原文件,请重新发出RESTORE语句,用WITH REPLACE来覆盖原先存在的文件
    SqlServer 2014 还原数据库时提示:操作系统返回了错误5,,拒绝访问
    Windows 7 上怎样打开SQL Server 配置管理器
    SqlServer2014怎样还原数据库
  • 原文地址:https://www.cnblogs.com/apolloren/p/10828166.html
Copyright © 2011-2022 走看看