将2个图像平行移动到页面角落

时间:2013-09-23 17:27:57

标签: html css animation

我有2张这样的图片:

<div id="logos_Body">
  <div id="logo1_Body">
    <img src='image1.png' id="logo1" width="334.2" height="369.2">
  </div>
  <div id="logo2_Body">
    <img src="image2.png" id="logo2" width="180" height="70">
  </div>
</div>

CSS:

#logos_Body{
animation:LogosMove 5s;
}
@-webkit-keyframes LogoMove {
  100% { top:-80px; left:-150px; width:170px; height:140px;}  
}

#logo1{
animation:Logo1Move 5s;
}
@-webkit-keyframes Logo1Move {
 100% {  width:90px; height: 110px;}  
 }

#logo2{
animation:logo2Move 5s;
}
@-webkit-keyframes logo2Move {
  100% { width:75px; height: 30px;}  
}

这些图像最初必须显示在页面中间,并显示宽度和高度。我想将它们移动到页面的右上角,并减小它们的宽度和高度。 我使用了如上所示的animation属性,问题是第一个图像向右移动没有问题(移动和调整大小)但第二个图像向右缩小但没有正确移动到角落。

我认为问题是image1身高是相关的,但我不确定,我不知道如何解决这个问题,谢谢。

1-初次出场。 2-我需要他们。 3-上面的代码给了我什么。 enter image description here

0 个答案:

没有答案