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了

  • 相关阅读:
    每天改进一点点之改进日志收集系统 原创: 赵建鹏 雪球工程师团队 2018-03-23
    Locust
    ('' or 60)
    python动态获取对象的属性和方法 (转载)
    MySQL 8.0: From SQL Tables to JSON Documents (and back again)
    词典型 遍历键 顺序
    子系统权限栏目 自己生成 自己控制
    Redis 单线程却能支撑高并发
    OPPO数据中台之基石:基于Flink SQL构建实数据仓库
    技术干货丨如何在VIPKID中构建MQ服务
  • 原文地址:https://www.cnblogs.com/sxxya/p/10399247.html
Copyright © 2011-2022 走看看