jQuery特效实例_幽灵按钮3|学习笔记

.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); //边框点亮效果

.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-left{ //观察得左边这条线有宽度，高度默认为0，
width: 2px;
height: 0;
bottom: -100%; //初始位置
left: -2px; //向左偏2px
}
.box .link . button: hover . line-left{ //给button添加hover属性，当鼠标略过，高度应该与按钮高度相同
height: 50px; //高度设置为50px
background: #fff;  //背景颜色设置为白色
left: -2px; //因为是从上到下显示，所以left，bottom值都为-2px
bottom: - 2px;
}

.box .link . button .line-right{ //右边这条线与左边同理，只是由上到下出现
width: 2px; //宽度默认2px
height:0; //高度为0
top: - 100%; //因为是从上到下显示的，所以设置成%100，让线从上到下滑动
right:- 2px;
}
.box .link .button:hover .line-right{
height: 50px; //高度为50px
background-color: #ffffff; //背景颜色为白色
top: -2px;
right: - 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
}