首页 > 代码库 > hover时border效果原理

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 设置四个边框给每个边框设置运动时间和延迟时间 实现各种效果。

hover时border效果原理