Question

我试图在另一张图片后面看到一张图片。是否可以使用z-index / opacity来实现这一目标？以下是我所指的代码。我使用background-position属性将内容移出视图。

@-webkit-keyframes bannerAnimation {
 0% {
background-position-x:
  -240px, 
  -160px,
  -240px,
  0;
 }
50% {
background-position-x:
  -240px, 
  -45px,
  -140px, 
  0;
} 
100% {
background-position-x: 
  117px,
  -65px,
  117px, 
  0;
}
0%, 48% {
background-position-y:
 -4000px,
  0px,
  480px,
  0px; 
} 
50%, 100% {
background-position-y:
  14px,
  0px,
  43px,
  0px; 
}
  0% {
opacity:
  0, 
  1,
  0,
  1;
}
50% {
opacity:
  0, 
  1,
  0, 
  1;
} 
100% {
opacity: 
  1,
  1,
  1, 
  1;
 }
}



#banner a#main .content {
background-image:
  url('../images/95x27_headline_2x.png'),
  url('../images/155x50_stephen_2x.png'),
  url('../images/41x4_copy_2x.png'),
  url('../images/320x50_bg_2x.png');
background-size:
  95px 27px, 
  155px 50px,
  41px 4px,
  320px 50px;
background-position-y:
  50px,
  0px,
  50px,
  0px;

-webkit-animation: bannerAnimation 6s ease forwards;

Answer 1

为了实现你想要做的事情我建议使用单独的div来分离图像。

然后尝试动画z-index本身，而不是动画背景位置。

@keyframes move {
  from { z-index: 0; transform: scale(1); }
  to { z-index: 4; transform: scale(2.5); }
}

在codepen.io上查看此示例，以帮助您开始正确的方向：）

关键帧动画图像分层

1 个答案: