如何过渡z-index

Question

https://jsfiddle.net/vaf6nv36/1/

气球图像可以在苹果图像上缓慢过渡吗？

我认为我需要更多的过渡参数，还是应该使用不透明度？

有人可以帮忙吗？

html

 <div class="img1">

     </div>
 <div class="img2">

 </div>

的CSS

.img1, .img2{
   border: 1px solid black;
   transition: 1s;
   position: absolute;
}

.img1{
    left: 25%;
    height: 500px;
    width: 500px;
    z-index: 1;
    background-image: url(http://cdn.pcwallart.com/images/balloons-photography-vintage-wallpaper-1.jpg);
   }

.img2{
  right: 25%;
  width: 500px;
  height: 500px;
  bottom: 0;
  z-index: 2;
  background-image:  url(https://i.pinimg.com/736x/c1/7b/15/c17b150e93c4e9c50d963b076484bee7--apple-wallpaper-iphone-wallpaper.jpg);
}

.img1:hover{
       z-index: 999;
}

Answer 1

我担心z-index过渡只会使元素逐步穿过每一层。为了获得不错的效果，您需要将其与不透明度过渡和缩放/位置过渡结合使用。小提琴向您展示这个想法：

.img1, .img2{

  border: 1px solid black;
    transition: 1s;
    position: absolute;
}

.img1{
    left: 25%;
    height: 500px;
    width: 500px;
    z-index: 1;
    transform: scale(0.9);
    opacity: 0.5;
    background-image: url(http://cdn.pcwallart.com/images/balloons-photography-vintage-wallpaper-1.jpg);
}

.img2{
    right: 25%;
    width: 500px;
    height: 500px;
    bottom: 0;
    z-index: 2;
    background-image:  url(https://i.pinimg.com/736x/c1/7b/15/c17b150e93c4e9c50d963b076484bee7--apple-wallpaper-iphone-wallpaper.jpg);
}

.img1:hover{
    animation: fronte 1s linear forwards; 
}

@keyframes fronte {
  from { z-index: 0; transform: scale(0.9); opacity: 0.5; }
  to { z-index: 4; transform: scale(1.1); opacity: 1; }
}

<div class="img1">
</div>
<div class="img2">
</div>

Answer 2

尽管从理论上讲您可以进行过渡z-index，但这并没有多大意义，即不会导致您显然正在寻找的淡入淡出效果：z-index值是整数，当您以尽可能小的步长更改它们时（整数，无逗号） -结果产生的状态要么在另一个之前，要么在另一个之后。-之间没有过渡的“半状态”。如果要在两个元素之间进行连续淡入淡出，则应在上使用一个过渡opacity。

在您的特殊情况下，由于您的DIV并不直接位于彼此之上，而是彼此重叠，因此可以通过使用DIV与img2（和我称其class .img3）相同的另一个z-index: 0CSS规则来解决此问题：

.img1:hover + .img2 {
  opacity: 0;
}

这将淡出img2，但仍显示img3，但是它位于 img1 后面，给人img1和img2之间过渡的印象。

https://jsfiddle.net/2a2epLfv/1/

.img1:hover + .img2 {
  opacity: 0;
}

.img1,
.img2,
.img3 {
  border: 1px solid black;
  transition: 1s;
  position: absolute;
}

.img1 {
  left: 20%;
  height: 300px;
  width: 300px;
  z-index: 1;
  background-image: url(http://cdn.pcwallart.com/images/balloons-photography-vintage-wallpaper-1.jpg);
}

.img2,
.img3 {
  right: 20%;
  width: 300px;
  height: 300px;
  top: 100px;
  background-image: url(https://i.pinimg.com/736x/c1/7b/15/c17b150e93c4e9c50d963b076484bee7--apple-wallpaper-iphone-wallpaper.jpg);
}

.img2 {
  z-index: 2;
}

.img3 {
  z-index: 0;
}

.img1:hover+.img2 {
  opacity: 0;
}