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


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM