Question

我在html5和css3中有一个关键帧动画。我需要一个闪烁的效果，所以我根据它编码css3关键帧动画。我的问题是，我给出了一个“绝对”的立场。为了一个div。除非我为边框1px添加额外的代码，否则它将无法工作，如果我给出

边框：1px实心透明＆＃39;位置：绝对＆＃39;会工作，否则就不会

我不需要那个边框，因为它会导致我的设计出现宽度问题。

这是我的HTML

＆＃13;

    @-webkit-keyframes blink {
      0% {
        opacity: 1;
      }
      50% {
        opacity: 0;
      }
      100% {
        opacity: 1;
      }
    }
    @-moz-keyframes blink {
      0% {
        opacity: 1;
      }
      50% {
        opacity: 0;
      }
      100% {
        opacity: 1;
      }
    }
    @-o-keyframes blink {
      0% {
        opacity: 1;
      }
      50% {
        opacity: 0;
      }
      100% {
        opacity: 1;
      }
    }
    .img-front {
      -webkit-animation: blink 1s;
      -webkit-animation-iteration-count: infinite;
      -moz-animation: blink 1s;
      -moz-animation-iteration-count: infinite;
      -o-animation: blink 1s;
      -o-animation-iteration-count: infinite;
      width: 500px;
      border: 1px solid transparent;
      position: inherit;
      left: 0;
    }
    .img-back {
      position: inherit;
      left: 0;
      width: 500px;
    }

＆＃13;

<html>

<body>
  <img class="img-back" src="http://goo.gl/L7WKNE" />
  <img class="img-front" src="http://goo.gl/EBMULc" />
</body>

</html>

＆＃13;

我如何对其进行排序，提前致谢。

Answer 1

尝试将图像放入div中，然后使用绝对位置。这将是肯定的。

<div class='img1'>
<img class="img-back" src="2668.jpg" />
</div>

<div class='img2'>
<img class="img-front" src="2668.png" />
</div>

使用此css

.img1,.img2{position:absolute; margin-left:0px;}

Answer 2

＆＃13;

    @-webkit-keyframes blink {
      0% {
        opacity: 1;
      }
      50% {
        opacity: 0;
      }
      100% {
        opacity: 1;
      }
    }
    @-moz-keyframes blink {
      0% {
        opacity: 1;
      }
      50% {
        opacity: 0;
      }
      100% {
        opacity: 1;
      }
    }
    @-o-keyframes blink {
      0% {
        opacity: 1;
      }
      50% {
        opacity: 0;
      }
      100% {
        opacity: 1;
      }
    }
    .img-front {
      -webkit-animation: blink 1s;
      -webkit-animation-iteration-count: infinite;
      -moz-animation: blink 1s;
      -moz-animation-iteration-count: infinite;
      -o-animation: blink 1s;
      -o-animation-iteration-count: infinite;
      width: 500px;
      border: 1px solid transparent;
      position: inherit;
      left: 0;
    }
    .img-back {
      position: inherit;
      left: 0;
      width: 500px;
    }
   .img-wrapper{
     position: absolute;
     float: left;
    }

＆＃13;

<html>

<body>
  <div class="img-wrapper">
      <img class="img-back" src="http://goo.gl/L7WKNE" />
      <img class="img-front" src="http://goo.gl/EBMULc" />
 </div>
</body>

</html>

＆＃13;

位置：绝对不工作，除非给出边框

2 个答案: