<div>
<div class="box">
<div class="item"><img src="img/2.jpg"></div>
<div class="item"><img src="img/3.jpg"></div>
<div class="item"><img src="img/4.jpg"></div>
<div class="item"><img src="img/5.jpg"></div>
</div>
</div>
样式如下:
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.box{
box-sizing: content-box;
width: 800px;
height: 300px;
border:1px solid black;
display:flex;
flex-direction: row;
margin: 50px auto
}
.item{
box-sizing: border-box;
width: 200px;
overflow: hidden;
}
img{
width: 260px;
height: 300px;
}
.box:hover .item{
width: 180px;
}
.box .item:hover{
width: 260px;
}
</style>
纯CSS手风琴效果
猜你喜欢
转载自www.cnblogs.com/qqinhappyhappy/p/11923303.html
今日推荐
周排行