web-dev-qa-db-ja.com

Z-indexを移行する方法

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

風船の画像はApple画像上でゆっくりと遷移できますか？

もっとトランジションパラメーターが必要だと思いますか、それとも不透明度を使用すべきですか？

誰か助けてもらえますか？

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;
}
htmlcsscss-transitions
7
Vittorio Cortosi

理論的にはあなたができるトランジションz-indexですが、あまり意味がありません。つまり、明らかに見ているクロスフェード効果にはなりませんの場合：z-index値は整数であり、これを-可能な最小のステップ（整数、コンマなし）で変更すると、他の前の状態になりますOR他の後ろone-中間に遷移 "ハーフステート"はありません。2つの要素間で一種の連続的なクロスフェードを行いたい場合は、opacityで遷移を使用する必要があります。

あなたの特定のケースでは、DIVはお互いの真上ではなく、互いに重なり合っているだけなので、2番目のDIVをimg2と同一にすることで解決できます（私はそのクラス.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>
7
Johannes

Z-indexの移行では、要素がすべてのレイヤーを1ステップずつ通過するだけだと思います。ニースエフェクトを作成するには、不透明度のトランジションとスケール/位置のトランジションと組み合わせる必要があります。アイデアを示すためのフィドル：

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

これは私が使ったトリックです。

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