详细介绍
点击进入:https://www.fly63.com/article/detial/11467
源码
<div class="gallery-wrap">
<div class="item item-1"></div>
<div class="item item-2"></div>
<div class="item item-3"></div>
<div class="item item-4"></div>
</div>
<style>
.gallery-wrap {
display: flex;
flex-direction: row;
width: 100%;
height: 200px;
}
.gallery-wrap .item {
flex: 1;
height: 100%;
background-position: center;
background-size: cover;
background-repeat: none;
transition: flex 0.8s ease;
}
.gallery-wrap .item:hover{
flex: 7;
cursor: pointer;
}
.gallery-wrap .item-1 {
background: #007aff;
}
.gallery-wrap .item-2 {
background: #4cd964;
}
.gallery-wrap .item-3 {
background: #f0ad4e;
}
.item-4 {
background: #dd524d;
}
</style>
本文内容仅供个人学习/研究/参考使用,不构成任何决策建议或专业指导。分享/转载时请标明原文来源,同时请勿将内容用于商业售卖、虚假宣传等非学习用途哦~感谢您的理解与支持!