前端录网站,记录前端点点滴滴,帮助程序猿快速成长!

Hover.css—前端CSS3特效框架,不会就OUT了

css3
做为前端人员,如果你目前还不知道CSS3,说明你所处的环境有问题了,如果你还不会CSS3,只能说明你已经OUT了,请跟上时代的步伐,坚持学习!

2013年各种前端框架涌现,让我们眼花缭乱,以Bootstrap,Foundation做为代表的框架比较多,主打功能全面,UI漂亮。

今天为大家推荐的CSS3等效前端框架Hover.css,简洁,小巧,实用。

官网示例地址:http://ianlunn.github.io/Hover/

Github开源地址:https://github.com/IanLunn/Hover

效果图预览:

简单使用如下,在页面中引入Hover.css

<link href="css/hover.css" rel="stylesheet" media="all">

 直接调用相应的样式class即可

<a rel="grow" class="button grow">Grow</a>
<a rel="shrink" class="button shrink">Shrink</a>
<a rel="pulse" class="button pulse">Pulse</a>
<a rel="pulse-grow" class="button pulse-grow">Pulse Grow</a>
<a rel="pulse-shrink" class="button pulse-shrink">Pulse Shrink</a>
<a rel="push" class="button push">Push</a>
<a rel="pop" class="button pop">Pop</a>
<a rel="rotate" class="button rotate">Rotate</a>
<a rel="grow-rotate" class="button grow-rotate">Grow Rotate</a>
<a rel="float" class="button float">Float</a>
<a rel="sink" class="button sink">Sink</a>
<a rel="hover" class="button hover">Hover</a>
<a rel="hang" class="button hang">Hang</a>
<a rel="skew" class="button skew">Skew</a>
<a rel="skew-forward" class="button skew-forward">Skew Forward</a>
<a rel="skew-backward" class="button skew-backward">Skew Backward</a>
<a rel="wobble-horizontal" class="button wobble-horizontal">Wobble Horizontal</a>
<a rel="wobble-vertical" class="button wobble-vertical">Wobble Vertical</a>
<a rel="wobble-top" class="button wobble-top">Wobble Top</a>
<a rel="wobble-bottom" class="button wobble-bottom">Wobble Bottom</a>
<a rel="wobble-skew" class="button wobble-skew">Wobble Skew</a>
<a rel="buzz" class="button buzz">Buzz</a>
<a rel="buzz-out" class="button buzz-out">Buzz Out</a>


转载请注明:前端录»Hover.css—前端CSS3特效框架,不会就OUT了