gpt4 book ai didi

html - CSS3 动画位置

转载 作者:太空狗 更新时间:2023-10-29 13:25:13 26 4
gpt4 key购买 nike

考虑 CSS3 动画,船在蓝色 div 上方移动。由于某种原因,船没有移动。 HTML 如下:

<div id="wrapper">
<div id="sea">
<img src="ship.png" alt="ship" width="128" height="128"/>
</div>
</div>

为了制作 CSS3 动画,我使用了以下内容:

#wrapper { position:relative;top:50px;width:700px;height:320px;
margin:0 auto;background:white;border-radius:10px;}
#sea { position:relative;background:#2875DE;width:700px;height:170px;
border-radius:10px;top:190px; }
#sea img {
position:relative;left:480px;top:-20px;
animation:myship 10s;
-moz-animation:myship 10s; /* Firefox */
-webkit-animation:myship 10s; /* Safari and Chrome */
@keyframes myship {
from {left: 480px;}
to{left:20px;}
}
@-moz-keyframes myship {
from {left: 480px;}
to {left:20px;}
}
@-webkit-keyframes myship {
from {left: 480px;}
to{left:20px;}
}
}

飞船图像没有移动。非常感谢任何帮助。

最佳答案

您必须在 css 选择器之外声明您的关键帧,并为绝对定位的元素设置动画。

http://jsfiddle.net/aNvSf/

你修改后的 css 看起来像这样:

#wrapper{
position:relative;
top:50px;
width:700px;
height:320px;
margin:0 auto;
background:white;
border-radius:10px;
}
#sea{
position:relative;
background:#2875DE;
width:700px;
height:170px;
border-radius:10px;
top:190px;
}
#sea img{
position:absolute;
left:480px;
top:-20px;
animation:myship 10s;
-moz-animation:myship 10s; /* Firefox */
-webkit-animation:myship 10s; /* Safari and Chrome */
}

@keyframes myship{
from {left: 480px;}
to{left:20px;}
}
@-moz-keyframes myship{
from {left: 480px;}
to{left:20px;}
}
@-webkit-keyframes myship{
from {left: 480px;}
to{left:20px;}
}​

关于html - CSS3 动画位置,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10424500/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com