>>分享Web前端开发技术,并对孙卫琴的《精通Vue.js:Web前端开发技术详解》提供技术支持 书籍支持  卫琴直播  品书摘要  在线测试  资源下载  联系我们
发表一个新主题 开启一个新投票 回复文章 您是本文章第 16292 个阅读者 刷新本主题
 * 贴子主题:  animate.css动画样式类型库的用法 回复文章 点赞(0)  收藏  
作者:flybird    发表时间:2024-04-18 07:47:05     消息  查看  搜索  好友  邮件  复制  引用

很久之前学animate留的笔记..

  2016年9月10号: E-cat

    昨晚学了animate.css觉得很有意思,这样可以通过简单调用class类名就能实现丰富有趣的动态样式。

    今天接着学了swipe这个专为移动端设计的插件,为了巩固知识点,做一下有关animate.css的笔记。



    首先从下载和安装开始说起:


    ①下载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"/>

    基本模板如下:
1 <!DOCTYPE html>
2 <html>
3 <head>
4      <meta charset="utf-8" />
5      <title></title>
6      <link rel="stylesheet" href="css/animate.css" />
7 </head>
8 <body>
9      <div id="test" class="animated bounce infinite">test</div>
10      <!-- 这边注意div里类名不分先后但是必须有animated 和 动作类名infinite即为无限循环,默认为播放一次 -->
11 </body>
12 </html>

 下载、安装结束,现在就可以开始享受learn more,write less的乐趣啦!!

    接下来,就是对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 向右侧旋转消失
  到此呢,整个animate.css里的所有动作效果规整完毕。回上边去填坑!!

  算了,还是在这里填吧,若想用到延时加载和控制运动过渡时间,就必须要用到jquery了,所以我们先去找个jq引入到页面底部

 Demo如下:


1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8" />
5 <title></title>
6 <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
7 <link rel="stylesheet" href="css/animate.css" />
8 <style type="text/css">
9 .test{
10 position: absolute;
11 width: 100px;
12 font-size: 50px;
13 top: 50px;
14 left: 50%;
15 margin-left: -50px;
16 }
17 </style>
18 </head>
19 <body>
20 <div class="animated rollIn test">test</div>
21 <script src="js/jquery-1.12.0.min.js" type="text/javascript" charset="utf-8"></script>
22 <script type="text/javascript">
23 $(document).ready(function(){
24   $('.test').css({'animation-duration':'.3s','animation-delay':'3s'})
25 })
26 </script>
27 </body>
28 </html>

没错,就是使用jq来重定义css样式,这种方法其实违背了animate简化运动代码的初衷!

原文链接:https://www.cnblogs.com/e-cat/p/8439221.html

程序猿的技术大观园:www.javathinker.net
网站系统异常


系统异常信息
Request URL: http://www.javathinker.net/WEB-INF/lybbs/jsp/topic.jsp?postID=3733

java.lang.NullPointerException

如果你不知道错误发生的原因,请把上面完整的信息提交给本站管理人员