CSS 向不同方向过渡

Question

我试图在将鼠标悬停在其中的较小盒子上时填充包装纸 (600x600px)。对于左上角的框，使用常规的 transition-timing-function 很容易完成，但是当尝试向其他方向放大时，我卡住了。

所以我有以下内容：

#allbox {
  background: #bbb;
  width: 600px;
  height: 600px;
  margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0
}

带框：

div.box1 {
  position: absolute;
  top: 0%;
  left: 0%;
}

div.box2 {
  position: absolute;
  top: 0%;
  left: 37.5%;
}

我使用的过渡：

#div1 {-webkit-transition-timing-function: linear;}
#div1 {transition-timing-function: linear;}
div.box1:hover {
  width: 600px;
  height: 600px;
}

但我无法为以下框找到一个好的方法。

Answer 1

我想我们只是将“left: 0;”添加到悬停状态。

div.box2:hover {
  left: 0;
  width: 600px;
  height: 600px;
}

希望对您有所帮助。

Answer 2

这是一个使用 z-index 将鼠标悬停在顶部的示例。

#allbox {
  background: #bbb;
  width: 600px;
  height: 300px;
  margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0
}
#allbox div {
  position: absolute;
  z-index: 1;
  top: 0%;
  width: 33.33%;
  height: 50%;
  transition: left 0.5s linear, width 0.5s linear, height 0.5s linear, z-index 1s linear;
}
div.box1 {
  left: 0;
  background: blue;
}
div.box2 {
  left: 33.33%;
  background: red;
}
div.box3 {
  left: 66.66%;
  background: green;
}
#allbox div:hover {
  z-index: 2;
  left: 0;
  width: 100%;
  height: 100%;
  transition: left 0.5s linear, width 0.5s linear, height 0.5s linear, z-index 0s linear;
}

<div id="allbox">
  <div class="box1">  
  </div>
  <div class="box2">  
  </div>
  <div class="box3">  
  </div>
</div>

CSS 向不同方向过渡

CSS transitions in different directions

css

transition

css-transitions