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了