具有過渡和鼠標懸停和鼠標移出功能的歪斜盒子

Question

兩個歪斜盒子具有半寬，它們將覆蓋mouseover後的全部寬度，並通過mouseout功能收縮到半寬。這link可能會幫助你理解。

Answer 1

.container{ 
 
    position:relative; 
 
width:100%; 
 
    height:200px; 
 
    background:#ccc; 
 
    overflow:hidden; 
 

 
} 
 
.content{ 
 
    position:absolute; 
 
    left:-150%; 
 
    width:200%; 
 
    height:100%; 
 
    background:#B51D21; 
 
    transform:SkewX(30deg); 
 
} 
 
.content:hover{ 
 
width:100%; 
 
left:0px; 
 
    transition-duration:1s; 
 
    transform:SkewX(0deg); 
 
}

<div class="container"> 
 
<div class="content"></div> 
 
</div>

試一次