transition結合:after,:before實現動畫

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%的一個過渡的效果

恩恩 歡迎補充的哦