这是一款jQuery边框线条动画插件。该插件可以为超链接或图片等元素添加在鼠标悬停时的边框线条动画效果。
使用方法
在页面中引入下面的文件。
<link rel="stylesheet" type="text/css" href="path/to/nicebord.css">
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="path/to/nicebord.js"></script>
HTML结构
<a href="#" id="first">Nicebord</a>
初始化插件
$(document).ready(function(){
$('#first').nicebord();
});
配置参数
| 名称 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| color | String | '000000' | 边框的颜色 |
| orientation | String | 'ckw' | 边框动画的方向：ckw时顺时针，ackw时逆时针 |
| size | Number | 1 | 边框的宽度 |
| pos | String | 'top,right,bottom,left' | 要使那一条边进行动画 |
| speed | Number | 500 | 边框动画的时间 |
| direction | Boolean | false | 边框动画是在元素内部还是外部 |
| fix | Boolean | false | 该参数通常用于在设置图片边框时，设置固定的边框尺寸 |
| center | Boolean | false | 是否从元素的中心开始动画 |
该jQuery边框线条动画插件的github网址为：https://dkdevru.github.io/nicebord/
