开发者学堂课程【jQuery 开发教程：jQuery 特效实例_幽灵按钮3】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/362/detail/4314
jQuery 特效实例_幽灵按钮3
一、按钮元素的动态效果
(1)将箭头制作动态效果
点亮效果
.box .link .button{
…
transition: 0.4s ease; //引入动画给0.4秒的执行时间，过渡类型为ease
-webkit-transition:0.4s ease;
//添加 webkit 的内核支持谷歌浏览器
position: relative; //设置按钮为相对定位
}
.box .link . button: hover{ //鼠标略过向效果 hover 右滑动效果是给button按钮中的背景图片添加的
background-position: 140px center ; //图片设置成140px，将图片向右移动一点
border-color: rgba(255,255,255,1); //边框点亮效
箭头动画和边框点亮效果结果
仔细观察，会发现他会有一个点亮的效果。
(2)四条线的效果：
首先找到线，第一层是box，第二层应该用link，四条线在每个按钮中都是一样的，第三层是button，然后是span里面的line。
鼠标略过从左到右出现，从右到左，上到下，下到上
.box .link . button . line{ //设置共同样式
position: absolute; //设置成绝对定位，起始位置固定
display: block; //将a标签设置成块级元素
background: none ;
transition: 0.4s ease ; //引入动画
-webkit-transition:0.4s ease; //添加内核
}
//然后设置当鼠标略过这几条线的变化，首先设置最上面的线
.box .link . button: hover .line-top{
left：-100%； //让线条完全的从最左侧出来
top：-2px；
width：0； //宽设置为0
height：2px； //高设置为2px
}
.box .link . button: hover .line-top{//给button按钮添加hover鼠标略过属性，略过的上面的线line-top变化
width: 180px; //设置宽度
background-color: #fff; //设置背景颜色为白色
position: absolute; //为绝对定位
left: -2pxs ; //线条从左到右出现
top: -2px;
}
此时边框上面的白线设置完毕，从左到右出现，效果图：
.box .link .button . line- bottom{ //设置最后一条线
right: - 100% ; //因为是从右到左滑入，所以right值默认为-%100
width:0; //宽度为0
height: 2px; 高度为2px
bottom: -2px;
}
.box .link . button: hover . line-bottom{ //设置hover状态，鼠标略过就滑入进来
right: - 2px;
bottom: - 2px;
background-color: #ffffff; //背景颜色为白色
width：180px； //宽度变为180px
}
此时边框底部的白线设置完毕，从右到左出现，效果图：
运行结果：三个按钮都已实现。