hover时border效果原理

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

<li>
    <i class="before"></i>
    <i class="after"></i>
</li>

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);

}

2.给li 设置四个边框给每个边框设置运动时间和延迟时间 实现各种效果。

转载于:https://www.cnblogs.com/pine-nut/p/6084070.html