anchor-hover-effect 炫酷鼠标滑过超链接动画特效

anchor-hover-effect是一款炫酷的鼠标滑过超链接动画特效jQuery插件。该插件提供4种超链接动画效果:3D翻转效果,括号动画效果,上下翻转效果和下划线动画效果。

使用方法

使用该插件需要在页面中引入anchorHoverEffect.cssjqueryanchorHoverEffect.js文件。

<link href="css/anchorHoverEffect.css" rel="stylesheet" type="text/css">
<script src="js/jquery.min.js"></script> <!-- 可选 -->
<script src="js/anchorHoverEffect.min.js"></script>

HTML结构

DEMO中使用无序列表来包裹一组超链接元素。

<ul class="ulDefault">
 <li><a href="#">jQuery</a></li>
 <li><a href="#">Angular Js</a></li>
 <li><a href="#">JavaScript</a></li>
 <li><a href="#">Asp.net MVC</a></li>
</ul>

初始化插件

在页面DOM元素加载完毕之后,可以通过anchorHoverEffect()方法来初始化该超链接到能够插件。

$(".ulDefault a").anchorHoverEffect();

配置参数 

该超链接动画插件有4个可用的配置参数,分别用于制作4最后不同的动画:

$(".ulDefault a").anchorHoverEffect({type: 'brackets'});
  • roller3d :默认动画效果,3D翻转效果。

  • brackets :方括号动画效果。

  • flip :上下翻转超链接文本。

  • borderBottom :下划线动画效果。

anchor-hover-effect超链接动画插件的github地址为:https://github.com/iSatinderSingh/anchor-hover-effect


相关阅读

7款CSS3鼠标滑过超链接动画特效

18种基于html5 svg和css3的神奇超链接动画效果

anchor-hover-effect 炫酷鼠标滑过超链接动画特效

与众不同的鼠标滑过超链接下划线动画效果

21种css3鼠标悬停hover超链接导航条动画效果 


赞(52) 打赏
未经允许不得转载:优客志 » 前端设计
分享到:

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏