文章/答案/技术大牛

发布

社区首页 >问答首页 >html图像响应式设计

问html图像响应式设计
EN

Stack Overflow用户

提问于 2018-02-21 14:15:07

回答 2查看 78关注 0票数 1

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

我使用'%‘制作了两个响应式图像

一个图像只有一个圆，另一个是一个圆+一个square6

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

第二个图像在其上进行动画处理

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

请帮帮我

$(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/

jquery

html

css

responsive-design

回答 2

Stack Overflow用户

回答已采纳

发布于 2018-02-21 14:23:16

由于这个问题的可读性很低，我不确定这是否是你想要的，但你会不会只是想要$('#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>

票数 0

Stack Overflow用户

发布于 2018-02-26 18:46:44

请将其修改为

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

这

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

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/48899258

复制

相似问题

问html图像响应式设计
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问html图像响应式设计EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问html图像响应式设计
EN