如何轉換 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 ，但這沒有多大意義，即不會導致您顯然正在尋找的淡入淡出效果： z-index值是整數，當您以盡可能小的步驟更改它們時（整數，無逗號） - 導致狀態在另一個之前或在另一個之后 - 中間沒有過渡“半狀態”。 如果你想在兩個元素之間做一種連續的淡入淡出，你應該在opacity上使用過渡。

在您的特定情況下，由於您的 DIV 不是直接在彼此上方，而只是彼此重疊，您可以通過使用與img2相同的第二個DIV （我將其稱為.img3 ）來解決該問題，但使用z-index: 0和這個 CSS 規則：

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

這將淡出 img2，但仍顯示 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>

Answer 2

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