如何轉換Z指數

氣球圖像可以緩慢地過渡到蘋果圖像嗎？

我認爲我需要更多的轉換參數，或者我應該使用不透明度？

有人可以幫忙嗎？

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

來源

2017-09-23 Vittorio Cortosi

透明度可能是要走的路。 – Gendarme

z-index上的轉換會做什麼？它要麼在它前面，要麼不是。 – glennsl

雖然理論上你可以過渡z-index，就沒有太大的意義，即不會造成交叉淡入淡出的效果，你明明是尋找：z-index值是整數，當你以最小的可能步驟（整數，沒有逗號）改變它們時，結果是在另一個之前或者在另一個後面 - 沒有過渡「半狀態」。如果你想在兩個元素之間進行一種連續交叉淡入淡出，你應該使用opacity的轉換。

在您的特定情況下，因爲你的DIV是不直接在彼此之上，但只有彼此重疊，就可以解決，通過具有第二DIV相同img2（I稱爲它的類.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>

來源

2017-09-23 22:52:17 Johannes

'您不能轉換z-index'這是錯誤的，z-index是應用轉換的有效屬性。 – TylerH

@Johannes是的，我讀了你的整個答案。我引用的部分仍然不正確。你說這個很奇怪，然後通過描述'z-index'是如何工作的，來反駁自己。 – TylerH

@TylerH我寫道它沒有意義，這意味着它不會導致OP想要的交叉漸變效果。無論如何，我爲他找到了一個解決方案。但我會添加一些東西，讓每個人都可以開心... – Johannes

恐怕z索引過渡僅使得通過每一層的步驟元件通步驟。爲了獲得好的效果，您需要將其與不透明度轉換和縮放/位置轉換相結合。小提琴向您展示的想法：

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

來源

2017-09-23 22:52:06 MarioZ

如何轉換Z指數

回答

相關問題