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

hover时border效果原理

2024-08-22 05:25:45   222人阅读

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效果原理


联系
我们