我正在尝试实现一个显示三列的 View 。当用户将鼠标悬停在其中一个上时,它应该以牺牲其他人为代价增长。 我有几个要求:
- 我希望每一列都有一个背景图片,并且在调整列大小时它不应该移动。
- 当列增长/收缩时应该有一个平滑的过渡
- 至少应该可以在 Safari、Firefox 和 Chrome 中运行
如果可能的话,我还想用对 Angular 线分隔每一列。最终结果应该是这样的:
我有基本的功能,但我遇到了几个问题:
- 我没能将背景图片固定在父 div 上
- 过渡在 Safari 中不起作用
- 在真实环境中,这是一个基于 Bootstrap 的网站,背景图像在 Safari 和 Chrome 上看似随机移动一两个像素。
- 我尝试使用 clip-path 实现对 Angular 线,但它在 Safari 中不起作用,在 Chrome 中效果很差
- 将列从第二列更改为第三列时,第一列的大小会稍微调整
- 在 Chrome 中,最右边的像素列在增长/收缩时闪烁
感谢任何提示!
这是我当前的代码:
.content {
display: flex;
border: 1px solid #f00;
background: #fbb;
padding: 10px;
height: 800px;
color: #fff;
}
.col {
flex-grow: 1;
flex-basis: 0;
transition: flex-grow .3s;
-webkit-transition: flex-grow .3s;
border: 1px solid #0f0;
padding: 10px;
}
.col:hover {
flex-grow: 5;
transition: flex-grow .3s;
-webkit-transition: flex-grow .3s;
}
.col1 {
background: url(https://images.pexels.com/photos/130184/pexels-photo-130184.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb);
background-attachment: fixed;
}
.col2 {
background: url(https://images.pexels.com/photos/354939/pexels-photo-354939.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb);
background-attachment: fixed;
}
.col3 {
background: url(https://images.pexels.com/photos/259915/pexels-photo-259915.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb);
background-attachment: fixed;
}
<div class="content">
<div class="col col1">
<h1>Foo!</h1>
</div>
<div class="col col2">
<h1>Bar!</h1>
</div>
<div class="col col3">
<h1>Brovinkel!</h1>
</div>
</div>
最佳答案
使用 transform: skew()
可以倾斜元素。
因为这将创建一个未填充的左上角和右下角区域,加宽左/右将覆盖它。
最后,我们恢复文本/图像的偏斜,其中我对图像使用了伪。
堆栈片段
.content {
display: flex;
height: 400px;
color: #fff;
overflow: hidden;
border: 5px solid #f00;
background: lime;
}
.col {
position: relative;
overflow: hidden;
flex-grow: 1;
flex-basis: 0;
transition: flex-grow .3s;
transform: skew(-20deg, 0);
background: yellow;
}
.col + .col {
border-left: 10px solid #0ff;
}
.col:first-child {
margin-left: -100px;
}
.col:last-child {
margin-right: -100px;
}
.col::before {
content: '';
position: absolute;
height: 100%;
width: calc(100% + 200px);
margin-left: -100px;
display: block;
background-attachment: fixed;
transform: skew(20deg, 0);
}
.col:hover {
flex-grow: 3;
transition: flex-grow .3s;
}
.col1::before {
background: url(https://images.pexels.com/photos/130184/pexels-photo-130184.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb);
}
.col2::before {
background: url(https://images.pexels.com/photos/354939/pexels-photo-354939.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb);
}
.col3::before {
background: url(https://images.pexels.com/photos/259915/pexels-photo-259915.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb);
}
.col h1 {
margin: 0;
padding: 10px;
transform: skew(20deg, 0);
}
.col:first-child h1 {
margin-left: 40px;
}
<div class="content">
<div class="col col1">
<h1>Foo!</h1>
</div>
<div class="col col2">
<h1>Bar!</h1>
</div>
<div class="col col3">
<h1>Brovinkel!</h1>
</div>
</div>
关于html - 使 flexbox 中的 div 在悬停时增长,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46886152/