zoukankan      html  css  js  c++  java
  • animate

    下载和安装:

        ①下载animate.css

            下载地址:https://www.haorooms.com/uploads/example/Animatecss/Animate/animate.css

        ②安装animate.css  /*开发版大小一般为72kb,压缩版为60kb*/

        直接在页面顶部head标签通过link引入<link rel="stylesheet" type="text/css" href="css/animate.min.css"/>

        如下:

       <link rel="stylesheet" href="css/animate.css" />


       /*按官网顺序*/

     ①Attention seekers

    • bounce    轻轻跳跃一下(弹跳;弹起,反跳;弹回)
    • flash     闪烁两次(使闪光;反射)
    • pulse     慢慢放大,然后回缩(跳动,脉跳)
    • shake     左右轻晃几次
    • swing     以中间顶部为中心小幅度晃动
    • tada      很调皮的一个小晃动,ps:只能这么描述了
    • wobble    大幅晃动,地动山摇

     ②Bouncing Entrances

    • bounceIn 正中央,从无到有,轻轻抖动几次
    • bounceInDown    从右侧进来,无到有,轻轻抖动几次
    • bounceInLeft 雷同,但是一定要注意大小写“专业点叫驼峰式”
    • bounceInRighr
    • bounceInUp
    • bouncing Exits
    • bounceOut 正中央,从有到无,轻轻抖动几次消失
    • bounceOutDown
    • bounceOutLeft
    • bounceOutRighr
    • bounceOutUp

     ③Fading Entrances

    • fadeIn     跟上面bounceIn还是有些区别的,毕竟不抖
    • fadeInDown 逐渐从上面down下来
    • fadeInDownBig逐渐从上面down下来,但是跟上面那位有稍微区别,加了big后起始位置是从设备外进来的
    • fadeInLeft
    • fadeInLeftBig
    • fadeInRight
    • fadeInRightNig
    • fadeInUp
    • fadeInUpBig 用up测试下big吧
    • fading Exits
    • fadeOut     恰与fadeIn相反
    • fadeOutDown 逐渐从上面down下去消失,你确定不玩玩big了?
    • fadeOutDownBig逐渐从上面down下去,但是跟上面那位有稍微区别,加了big后终点位置是从设备外
    • fadeOutLeft
    • fadeOutLeftBig
    • fadeOutRight
    • fadeOutRightNig
    • fadeOutUp
    • fadeOutUpBig

     /*以下这些都是常用的哦!*/

     ④Flippers

    • flip 一个夸张的放大饭庄缩小效果
    • flipInX 沿中心水平轴小幅度反转出来
    • FlipInY 沿中心竖直轴小幅度反转出来
    • flipOutX 沿中心水平轴小幅度反转消失
    • FlipOutY 沿中心竖直轴小幅度反转消失

     ⑤Lightspeed

    • lightSpeedIn 字面意思就是光速出来喽,记得调快速度哦,什么,怎么调速我没说么?好吧,先留个坑,待会儿补。
    • lightSpeedOut 光速消失

       ⑥Rotating Entrances

    • rotateIn 准确说是以正中心点180度旋转渐显
    • rotateInDownLeft  没错,就是以左上角为中心点转下来
    • rotateInDownRight 就是以右上角为中心点转下来
    • rotateInUpLeft     就是以左上角为中心点转上去
    • rotateInUpRight    就是以右上角为中心点转上去
    • rotating Exits
    • rotateOut 准确说是以正中心点180度旋转渐隐
    • rotateOut DownLeft  
    • rotateOut DownRight
    • rotateOut UpLeft     
    • rotateOut UpRight    

     ⑦Sliding Entrances

    • slideInUp 这个slide感觉就有点鸡肋了,有了上边的Lightspeed、fadeIn,就会看出这个的弊端,动作幅度太小
    • slideInDown
    • slideInLeft
    • slideInRight
    • sliding Exits
    • slideOutUp 表现依旧不好
    • slideOutDown
    • slideOutLeft
    • slideOutRight

     ⑧Zoom Entrances

    • zoomIn 牢记哦,正中央出来的,做效果是最棒了
    • zoomInDown
    • zoomInLeft
    • zoomInRight
    • zoomInUp
    • zoom Exits
    • zoomOut 牢记哦,正中央消失的,配合上面的zoomIn做效果是最棒了
    • zoomOutDown
    • zoomOutLeft
    • zoomOutRight
    • zoomOutUp

     ⑨Specials

    • hinge 悬挂,颤抖,掉下去
    • rollIn 从左侧旋转进入
    • rollOut 向右侧旋转消失

    若想用到延时加载和控制运动过渡时间,就必须要用jquery了

  • 相关阅读:
    VS提示“项目文件" "已被重命名或已不在解决方案中”的解决办法 .
    微信公众平台教程和SDK收集
    “SQLServerAgent当前未运行”问题解决
    $(document).click() 在苹果手机上不能正常运行
    友盟iOS推送配置(从真机调试到推送)
    Ubuntu安装VMware Tools的方法
    TortoiseSVN客户端如何更改新的URL
    Windows Server 2008系统如何取消登录时要按Ctrl+Alt+Delete组合键
    Windows Server 2008 显示桌面图标
    用WinRAR进行安装包的制作
  • 原文地址:https://www.cnblogs.com/sxxya/p/10399247.html
Copyright © 2011-2022 走看看