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'); 而不是？下面的例子

$(document).ready(function() {
  setTimeout(function() {
    $('#animate-img2').addClass('hide');
    $('#animate-img').css('display', 'block');
    $('#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>

Answer 2

请修改为

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

这个

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