Question

第一次在这里发帖，长期以来一直使用该网站作为我遇到的任何问题的资源但是我第一次无法使用以前的答案修复我的代码。

对于我所要求的内容，可能有一个非常简单的答案，我只是遗漏了一些东西。

我正在尝试创建一个我可以很快在生产网站中使用的代码段。我想创建一个围绕图像的图像“框架”。然后我也希望这个框架能够动画并从一边到另一边摆动。

在插入动画代码之前，代码如下所示，并且工作正常（框架位于图像上方）。

.frame {
    margin-top: 5rem;
    margin-left: 35%;
    display: inline-flex;
    background-image: url(http://www.studiopastimes.info/tester/images/frame.svg);
    background-repeat: no-repeat;
    z-index: 1000;
    padding: 3rem;
    box-sizing: border-box;
}
.internal-frame {
    position: relative;
    width: 400px;
    z-index:-5;
}
.internal-frame img {
    width: 100%;
}

但是，当我添加动画代码时，会打破z-index。

@-webkit-keyframes swinging{
    0%{-webkit-transform: rotate(10deg);}
    33%{-webkit-transform: rotate(-5deg);}
    66%{-webkit-transform: rotate(10deg);}
    100%{-webkit-transform: rotate(-5deg);}
}

@keyframes swinging{
    0%{-webkit-transform: rotate(10deg);}
    33%{-webkit-transform: rotate(-5deg);}
    66%{-webkit-transform: rotate(10deg);}
    100%{-webkit-transform: rotate(-5deg);}
}

.swingimage{
    -webkit-transform-origin: 50% 0;
    transform-origin: 50% 0;
    -webkit-animation: swinging 5s ease-in-out ;
    animation: swinging 5s ease-in-out ;
    animation-fill-mode: forwards;
    backface-visibility: hidden;
}

这可以在Codepen中看到：https://codepen.io/anon/pen/RMrrWB

任何想法如何让CSS动画工作，惠斯特仍然有图像上方的框架？我从我的研究中了解到CSS动画和z-index的问题，但我无法获得任何建议的修复工作。任何帮助都会很棒，如果我对这个问题有任何疑问，请告诉我！

由于

Answer 1

我把框架放在一个伪元素上：

.frame {
  margin-top: 5rem;
  margin-left: 35%;
  box-sizing: border-box;
  width: 400px;
  padding-top: 69.25%;  /* this is the aspect ratio of the image: height / width */
  position: relative;
}

.frame:after {
  content:''; 
  display:block;
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background-image: url(http://www.studiopastimes.info/tester/images/frame.svg);
  background-repeat: no-repeat;
  padding: 20px;
}

img {
  position: absolute;
  top: 20px;           /* match the padding */
  left: 0;
  width: 100%;
  z-index: 1;
}

@-webkit-keyframes swinging {
  0% {
    -webkit-transform: rotate(10deg);
  }
  33% {
    -webkit-transform: rotate(-5deg);
  }
  66% {
    -webkit-transform: rotate(10deg);
  }
  100% {
    -webkit-transform: rotate(-5deg);
  }
}

@keyframes swinging {
  0% {
    -webkit-transform: rotate(10deg);
  }
  33% {
    -webkit-transform: rotate(-5deg);
  }
  66% {
    -webkit-transform: rotate(10deg);
  }
  100% {
    -webkit-transform: rotate(-5deg);
  }
}

.swingimage {
  -webkit-transform-origin: 50% 0;
  transform-origin: 50% 0;
  -webkit-animation: swinging 5s ease-in-out;
  animation: swinging 5s ease-in-out;
  animation-fill-mode: both;
  backface-visibility: hidden;
}

<div class="frame swingimage">
  <img src="http://www.studiopastimes.info/tester/images/cabaret.jpg" class="img">
</div>

Answer 2

z-index属性需要元素具有设置位置。然后，如果您只是将position: relative;添加到.frame，那么它就可以完成工作。

完整的css：

.frame {
        margin-top: 5rem;
        margin-left: 35%;
    display: inline-flex;
        position: relative;
        background-image: url(http://www.studiopastimes.info/tester/images/frame.svg);
        background-repeat: no-repeat;
  position: relative
        z-index: 10;
        padding: 3rem;
        box-sizing: border-box;
/*      height: 10rem;
            width: 20rem;*/
}
.internal-frame {
        position: relative;
        width: 400px;
    z-index:-5;
}
.internal-frame img {
        width: 100%;
  z-index:-5;
}

@-webkit-keyframes swinging{
    0%{-webkit-transform: rotate(10deg);}
    33%{-webkit-transform: rotate(-5deg);}
    66%{-webkit-transform: rotate(10deg);}
    100%{-webkit-transform: rotate(-5deg);}
}

@keyframes swinging{
    0%{-webkit-transform: rotate(10deg);}
    33%{-webkit-transform: rotate(-5deg);}
    66%{-webkit-transform: rotate(10deg);}
    100%{-webkit-transform: rotate(-5deg);}
}

.swingimage{
    -webkit-transform-origin: 50% 0;
    transform-origin: 50% 0;
    -webkit-animation: swinging 5s ease-in-out ;
    animation: swinging 5s ease-in-out ;
    animation-fill-mode: both;
    backface-visibility: hidden;
}

使用你的html：

<!DOCTYPE html>
<html>
<head>
    <title>FRAME TESTER</title>
</head>
<body>
<div class="frame">
    <div class="internal-frame">
<img src="http://www.studiopastimes.info/tester/images/cabaret.jpg">
</div>
</div>
</body>
</html>

z-index问题与CSS动画有关

2 个答案: