div代碼
<div class='div'>
hover
</div>
css代碼
.div{
width:200px;
height:100px;
line-height: 100px;
text-align: center;
border-radius: 5px;
background-color: #FEC171;
transition: all 600ms ease;
position: relative;
}
.div:hover{
background-color: #fff;
border-radius: 0;
}
.div:hover:before,.div:hover:after{
width:100%;
transition: all 600ms ease;
background-color: #FEC171;
}
.div:before,.div:after{
position: absolute;
content:'';
top:0;
right:0;
height:2px;
width:0;
transition: all 400ms ease
}
.div:after{
right:inherit;
top:inherit;
left:0;
bottom:0;
}
思路
實現的是一個divhover上去改變背景色，但是顯示很單調，而且沒有動畫的效果
然后這個代碼是結合了偽類before跟after來實現before一條線，after一條線
before這條線從右邊出來
after這條線從左邊出來的這樣一個有動畫效果的感覺
實現的思路就是用transition的過渡來實現的，當然上面的代碼沒有做兼容
before跟after的那條線都可以給一個絕對定位然后看起來跟div的border一樣的效果
before是用絕對定位在top:0,right:0那里,就是從right:0,width:0到width:100%的一個過渡的效果
after是用絕對定位在top:inherit,right:inherit,bottom:0,left:0那里就是從left：0，width:0到width:100%的一個過渡的效果
恩恩 歡迎補充的哦