css3动态边框

时间:2022-07-25 11:52:55
<ul class="partnersLogo">
  <li>
    <a href="http://www.chinapnr.com/" target="_blank">
      <div class="border_top"></div>
      <div class="border_right"></div>
      <div class="border_bottom"></div>
      <div class="border_left"></div>
      <img src="../images/home/partnersLogo2.jpg" alt="" />
    </a>
  </li>
</ul>

  .partners li a{
    display:block;
    }
  .partners li{
    float:left;
    height:39px;
    padding:12px 0;
    line-height:39px;
    margin-right:7px;

    position:relative;
   }

.border_top{
position:absolute;
height:1px;
width:0;
font-size:0;
background:#49d6da;
top:11px;
left:-1px;
-webkit-transition:all 0.3s ease-out;
-o-transition:all 0.3s ease-out;
transition:all 0.3s ease-out;
}
.border_right{
position:absolute;
height:0;
width:1px;
font-size:0;
background:#49d6da;
bottom:9px;
right:-1px;
-webkit-transition:all 0.3s ease-out;
-o-transition:all 0.3s ease-out;
transition:all 0.3s ease-out;
}
.border_bottom{
position:absolute;
height:1px;
width:0;
font-size:0;
background:#49d6da;
right:0;
bottom:9px;
-webkit-transition:all 0.3s ease-out;
-o-transition:all 0.3s ease-out;
transition:all 0.3s ease-out;
}
.border_left{
position:absolute;
height:0;
width:1px;
font-size:0;
background:#49d6da;
left:-1px;
top:12px;
-webkit-transition:all 0.3s ease-out;
-o-transition:all 0.3s ease-out;
transition:all 0.3s ease-out;
}
.partners li a:hover .border_top{width:120px}
.partners li a:hover .border_bottom{width:119px}
.partners li a:hover .border_left,.partners li a:hover .border_right{height:42px}