我有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-上面的代码给了我什么。