如何过渡z-index？

Question

如何过渡z-index？

htmlcsscss-transitions

21

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

气球的图片能够缓慢地过渡到苹果的图片上吗？

我认为我需要更多的转换参数，或者我应该使用不透明度(opacity)？

有人可以帮助我吗？

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;
}

- Vitto

3

不透明度可能是可行的选择。 - RaminS

3

z-index 的变化会发生什么？它要么在其前面，要么不在。 - glennsl

3个回答

4

我担心 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>

- MarioZ

3

这是我使用的技巧。

.minus{animation:move 2s;animation-fill-mode:forwards;animation-delay:2s;}

@-webkit-keyframes move {
  0 {z-index:1;opacity:1}
  50% {opacity:0}
  100% { z-index:-1;opacity:1}
}
@keyframes move {
  0 {z-index:1;opacity:1}
  50% {opacity:0}
  100% {z-index:-1;opacity:1}
}

#main{background:red;width:100vw;height:100vh;position:fixed;top:0;left:0;opacity:.9}
.minus{position:fixed;top:10px;left:10px;z-index:1;color:#000}

<div id="main"></div>
<div class="minus">FADE</div>

- Federico

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Johannes · Accepted Answer

尽管理论上你可以过渡 z-index，但这并没有多大意义，即不会产生你明显想要的淡入淡出效果： z-index 的值是整数，当你以最小可能的步骤（整数，没有逗号）更改它们时，结果要么在另一个状态之前，要么在另一个状态之后，没有过渡的“半状态”。如果你想在两个元素之间做一种连续的淡入淡出效果，你应该在 opacity 上使用转换。

在你的特定情况下，由于你的 DIV 不是直接相互堆叠的，而是只有部分重叠，你可以通过拥有第二个与 img2 相同的 DIV（我称其类为 .img3），但具有 z-index: 0 和此 CSS 规则来解决问题：

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

这将使img2淡出，但仍然显示img3，然而img3在img1后面，营造出从img1到img2的过渡效果。

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

.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;
}

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