hover时border效果原理

时间：2016-11-21 08:02:45 阅读：249 评论：0 收藏：0 [点我收藏+]

1. 从中间往两边散发：父元素设置相对定位；子元素设置绝对定位；设置子元素高度（有值）和设置宽度（0）来确定上下border。置子元素高度（0）和设置宽度（有值）来确定左右border。

li {

position: relative;

}

i.before { display: inline-block;

width: 0%;

height: 200px;

position: absolute;

top: 0;

left: 50%;

border-top: solid 3px #fff;

border-bottom: solid 3px #fff;

opacity: 0.5;

transition: width 0.5s,left 0.5s;

-webkit-transition: width 0.5s,left 0.5s;

-o-transition: width 0.5s,left 0.5s;

-moz-transition: width 0.5s,left 0.5s;

filter: alpha(opacity=50);

i.after{ display: inline-block;

width: 200px;

height: 0;

position: absolute;

top: 50%;

left: 0;

border-right: solid 3px #fff;

border-left: solid 3px #fff;

opacity: 0.5;

transition: width 0.5s,left 0.5s;

-webkit-transition: width 0.5s,left 0.5s;

-o-transition: width 0.5s,left 0.5s;

-moz-transition: width 0.5s,left 0.5s;

filter: alpha(opacity=50);

原文地址：http://www.cnblogs.com/pine-nut/p/6084070.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

周排行