html图像响应式设计

Question

我在调整图像大小时遇到​​问题

我使用'％'

制作了两张图片

一张图片只有一个圆圈，另一张图片只有一个圆圈+一个方格6

图像圈是相同的图像，因为当第一张图像完成动画时，

第二张图片在其上面动画

当我调整网站大小时，第二张图片的圆圈比例和第一张图片的圆圈必须调整相同的比例

请帮帮我

$(document).ready(function() {
  setTimeout(function() {
    $('#animate-img2').addClass('hide');
    $('#animate-img').css('display', 'inline');
    $('#animate-img').addClass('fadeIn');
  }, 1000);
});

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.fadeIn {
  animation-duration: 2s;
  animation-fill-mode: both;
  animation-name: fadeIn;
}

#animate-img {
  display: none;
  z-index: 2;
}

#animate-img2 {
  z-index: 2;
  width: 30%;
}

.hide {
  display: none;
}

.show {
  display: inline;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="position:absolute;">
  <div style="position:relative;"><img id="animate-img2" class="fadeIn" src="https://s5.postimg.org/6tl50t2r7/image.png"></div>
</div>
<div style="position:absolute;">
  <div style="position:relative;"><img id="animate-img" src="https://s5.postimg.org/7j3xd6b0j/image.png"></div>
</div>

https://jsfiddle.net/84e7vL9n/8/

Answer 1

由于问题的可读性较低，我不确定这是否是您要找的，但是您可能只想要$('#animate-img').css('display', 'block');吗？以下示例

＆＃13;

＆＃13;

$(document).ready(function() {
  setTimeout(function() {
    $('#animate-img2').addClass('hide');
    $('#animate-img').css('display', 'block');
    $('#animate-img').addClass('fadeIn');
  }, 1000);
});

＆＃13;

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.fadeIn {
  animation-duration: 2s;
  animation-fill-mode: both;
  animation-name: fadeIn;
}

#animate-img {
  display: none;
  z-index: 2;
}

#animate-img2 {
  z-index: 2;
  width: 30%;
}

.hide {
  display: none;
}

.show {
  display: inline;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="position:absolute;">
  <div style="position:relative;"><img id="animate-img2" class="fadeIn" src="https://s5.postimg.org/6tl50t2r7/image.png"></div>
</div>
<div style="position:absolute;">
  <div style="position:relative;"><img id="animate-img" src="https://s5.postimg.org/7j3xd6b0j/image.png"></div>
</div>

＆＃13;

＆＃13;

＆＃13;