先看布局：
<div class="img-wrap">
<span class="l_t"></span> //盒子左上角动画
<span class="r_b"></span>//盒子右下角动画
<img src="https://www.szmassart.com/UserFiles/article/medium/1467623794814.jpg" alt="">
</div>
再看css:
.img-wrap {
float: left;
margin-right: 26px;
width: 240px;
height: 135px;
overflow: hidden;
position: relative;
}
.img-wrap .l_t, .img-wrap .r_b {
position: absolute;
z-index: 9;
top: 0;
left: 0;
width: 0;
height: 0;
border: 3px solid transparent;
-webkit-transition: width 0.6s ease-in-out,height 0.6s ease-in-out;
-moz-transition: width 0.6s ease-in-out,height 0.6s ease-in-out;
-o-transition: width 0.6s ease-in-out,height 0.6s ease-in-out;
-ms-transition: width 0.6s ease-in-out,height 0.6s ease;
transition: width 0.6s ease-in-out,height 0.6s ease-in-out;
}
.img-wrap:hover .l_t,
.img-wrap:hover .r_b{
width:100%;
height:100%;
box-sizing:border-box;
}
.img-wrap:hover .l_t{
border-top-color: #da9f20;
border-left-color: #da9f20;
}
.img-wrap:hover .r_b{
top:auto;
left:auto;
right:0;
bottom:0;
border-bottom-color: #da9f20;
border-right-color: #da9f20;
}
