在悬停时使Flexbox中的div变为

时间:2017-10-23 09:36:49

标签: html css css3 flexbox css-transitions

我试图实现一个显示三列的视图。当用户将鼠标悬停在其中一个上面时,它应该以牺牲其他人为代价来增长。 我有一些要求:

  • 我希望每列都有一个背景图像,并且在调整列的大小时不应该移动。
  • 列增长/缩小时应该有平滑过渡
  • 它应该至少适用于Safari,Firefox和Chrome

如果可能的话,我还希望每列用对角线分隔。这就是最终结果应该是这样的:

end result

我有基本的功能,但我遇到了几个问题:

  • 我没有设法将背景图片修复为父div
  • 过渡在Safari中不起作用
  • 在真实环境中,这是一个基于Bootstrap的网站,背景图像在Safari和Chrome上随机移动了一两个像素。
  • 我尝试使用剪辑路径来实现对角线,但它在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>
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分:1)

使用transform: skew()可以倾斜项目。

由于这会产生一个未填充的左上角和右下角区域,因此左/右区域会加宽。

最后,我们将文本/图像的偏斜恢复,我在图像中使用了伪。

Stack snippet

&#13;
&#13;
.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;
}
&#13;
<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>
&#13;
&#13;
&#13;