html css animate,animate.css

这是个css3动画框架，现在很流行，在小动画效果有很多，使用的方式

/*只要修改bounce这个类就可以*/

一、atention Seekers

1、bounce

2、flash

3、pulse

4、rubberBand

5、shake

6、swing

7、tada

8、wobble

9、jello

二、Bouncing Entrances

1、bounceIn

2、bounceInDown

3、bounceInLeft

4、bounceInRight

5、bounceInUp

三、Bouncing Exits

1、bounceOut

2、bounceOutDown

3、bounceOutLeft

4、bounceOutRight

5、bounceOutUp

四、Fading Entrances

1、fadeIn

2、fadeInDown

3、fadeInDownBig

4、fadeInLeft

5、fadeInLeftBig

6、fadeInRight

7、fadeInRightBig

8、fadeInUp

9、fadeInUpBig

五、Fading Exits

1、fadeOut

2、fadeOutDown

3、fadeOutDownBig

4、fadeOutLeft

5、fadeOutLeftBig

6、fadeOutRight

7、fadeOutRightBig

8、fadeOutUp

9、fadeOutUpBig

六、Flippers

1、flip

2、flipInX

3、flipInY

4、flipOutX

5、flipOutY

七、Lightspeed

1、lightSpeedIn

2、lightSpeedOut

八、Rotating Entrances

1、rotateIn

2、rotateInDownLeft

3、rotateInDownRight

4、rotateInUpLeft

5、rotateInUpRight

九、Rotating Exits

1、rotateOut

2、rotateOutDownLeft

3、rotateOutDownRight

4、rotateOutUpLeft

5、rotateOutUpRight

十、Sliding Entrances

1、slideInUp

2、slideInDown

3、slideInLeft

4、slideInRight

5、slideOutUp

6、slideOutDown

7、slideOutLeft

8、slideOutRight

十一、Zoom Entrances

1、zoomIn

2、zoomInDown

3、zoomInLeft

4、zoomInRight

5、zoomInUp

十二、Zoom Exits

1、zoomOut

2、zoomOutDown

3、zoomOutLeft

4、zoomOutRight

5、zoomOutUp

十三、specials

1、hinge

2、rollIn

3、rollOut

奉上测试代码：

animation

div{

width: 100px;

height: 100px;

margin: 100px;

margin-bottom: 50px;

background: #0ff0f0;

}

input[type="text"]{

outline: none;

width: 188px;

height: 48px;

border: 2px solid #888;

border-radius:10px;

text-align: center;

font-weight: bold;

font-size: 16px;

margin-left:55px;

}

input[type="button"]{

width: 120px;

height: 40px;

font-family: "黑体";

text-align: center;

font-weight: bold;

outline: none;

border: 2px solid #00FFFF;

background: #fff;

color: #00FFFF;

font-size: 14px;

cursor: pointer;

border-radius: 5px;

margin-left:50px;

}

var oBtn=document.getElementsByTagName("input")[1];

var oDiv=document.getElementsByTagName("div")[0];

var oText=document.getElementsByTagName("input")[0];

oBtn.οnclick=function(){

oDiv.className="animated rollOut";

var arr=oDiv.className.split(" ");

oText.value=arr[1];

setTimeout(function(){oDiv.className=""},1000);

}

animate.css(第三方动画使用方法)

p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 17.0px Monaco; color: #a5b2b9 } animation 语法: animatio ...

css3动画简介以及动画库animate.css的使用

在这个年代,你要是不懂一点点css3的知识,你都不好意思说你是个美工.美你妹啊,请叫我前端工程师好不好.呃..好吧,攻城尸...呵呵,作为一个攻城尸,没有点高端大气上档次的东西怎么能行呢,那么css3 ...

使用CSS3动画库animate.css

IE9及更早版本的IE浏览器都不支持css3动画 谷歌浏览器.火狐浏览器.IE10+浏览器以及移动端浏览器等这些都支持css3动画 animate.css内置了很多典型的css3动画   用法   1 ...

动画库Animate.css

笔记分享: 用法:到官网(http://daneden.github.io/animate.css/),下载animate.min.css文件.点击这里 1.首先引入animate css文件 &lt ...

animate.css总结

本文对animate.css的各个效果进行总结 bounce 从上掉落,在地上小幅度跳起

【ALB技术笔记】基于多线程方式的串行通信接口数据接收案例

基于多线程方式的串行通信接口数据接收案例 广东职业技术技术学院  欧浩源 1.案例背景 在本博客的中实现了电压数据采集的 ...

chrome小书签-实用的小功能-javascript代码段

1.打印页面的所有脚本引用文件及代码段: javascript:var scriptarray=document.getElementsByTagName("script");fo ...

【vim】删除指定标记前的内容 dt[标记]

和删除标记内部有些相似,但目的不同.命令如下: dt[标记] 会删除所有光标和标记之间的内容(保持标记不动),如果在同一行有这个标记的话.例如 dt. 会删除至句子的末尾,但保持 '.' 不动.

Hbase建表时遇到的问题This could be a sign that the server has too many connections

Hbase创建表时遇到以下错误: ERROR: org.apache.hadoop.hbase.ZooKeeperConnectionException: HBase is able to conne ...

js反选

& ...

.Net Core使用Socket与树莓派进行通信

前言 去年买的树莓派一直放在抽屉里吃灰,前些阵子Debian 9发布,也不出意外的支持了树莓派. 于是重新拿出读卡器又重新了装上了Debian桌面版系统. 介绍 现在这个东西目前的程度只是了解一下Py ...