浏览jq22的时候,觉得页面上详细导航栏的hover很好看,当你hover上去的时候,整个盒子的周围边框会从左上角流动到右上角,当鼠标离开,又流回来.所以把代码弄下来,试着玩了一下,这里做一个小结.毕竟以前也用到transition,但是没别人玩的溜啊.
需要用到的知识点:
1. 标签的伪元素: :before和:after.事实上,这个两个伪元素京城被用来实现效果,例如字体图标等
2. transition的使用
先贴代码,有所改动,当前jq22的代码太长,做了一点处理.
.test {
width:120px;
height:50px;
border:1px solid #474747;
position:relative;
display:block;
text-align:center;
}
.test:before,.test:after {
position:absolute;
content:"";
height:0;
width:0;
border:1px solid transparent;
}
.test:hover:before,.test:hover:after {
width:100%;
height:100%;
}
.test:before {
bottom:0;
right:0;
transition:border-color 0s ease-in 0.4s,width 0.2s ease-in 0.2s,height 0.2s ease-in;
}
.test:hover:before {
border-bottom-color:steelblue;
border-left-color:steelblue;
transition:border-color 0.4s ease-out ,width 0.2s ease-out 0.4s,height 0.2s ease-out 0.6s;
}
.test:after {
left:0;
top:0;
transition:border-color 0s ease-in 0.6s,width 0.2s ease-in 0.6s ,height 0.2s ease-in 0.4s;
}
.test:hover:after {
border-top-color:steelblue;
border-right-color:steelblue;
transition:width 0.2s ease-out ,height 0.2s ease-out 0.2s;
}
HTML代码:
首先 a标签必须是相对定位,有宽高,可是设置边框,看起来效果会突出一些.
其实设置伪元素:伪元素都要绝对定位,然后设置透明的border,这里的定位偏移还是要注意的,因为我们需要,顺序流动过去,这里在过渡的时候,就需要延展的方向不同,所以讲before定位在右下角,after定位左上角.然后这里我们需要过渡的元素是伪元素的宽和高,对于左上角的元素,先过渡宽,延时0.2后,过渡height,接着过渡右下角的伪元素.当然要合理设置延时.这样就可以hover,边框从左上流动一周.这里before过渡结束,有颜色的上右边框,after是下左边框.
这里transition无论是否放在hover里,都可以完成效果,但是只能去不能流回来.
所以流过去的效果定义在hover:after和hover:before中,流回来的效果定义在伪元素样式内,道理一样,合理设定延时的时间