您好我正在尝试使用CSS在屏幕上移动图像。目前,当我运行它时,它只显示在页面顶部。这是我正在尝试的代码。我试图在chrome中运行它。
<head>
<style>
#float{
width: 200px;
height: 500px;
position: relative;
animation: floatBubble 2s inifnate;
animation-directon: normal;
}
@keyframes floatBubble{
0% {
top:0;
-webkit-animation-timing-function: ease-in;
}
100% {
top: 500px;
animation-timing-function: ease-out;
}
}
</style>
</head>
<body style="background-color:#FF9900; color:#CC0033; text-align:center">
<div id="float">
<img src ="bub.png" height="100px" width="100px" alt="bubbles">
</div>
</body>
答案 0 :(得分:7)
试试这个:
<强> Working Example 强>
#float {
position: relative;
-webkit-animation: floatBubble 2s infinite normal ease-out;
animation: floatBubble 2s infinite normal ease-out;
}
@-webkit-keyframes floatBubble {
0% {
top:500px;
}
100% {
top: 0px;
}
}
@keyframes floatBubble {
0% {
top:500px;
}
100% {
top: 0px;
}
}
答案 1 :(得分:2)
检查出来:
CSS:
<style>
#float{
position: relative;
-webkit-animation: floatBubble 2s infinite;
-webkit-animation-direction:alternate;
}
@-webkit-keyframes floatBubble{
from{
top:0;
-webkit-animation-timing-function: ease-in;
}
to {
top: 200px;
-webkit-animation-timing-function: ease-out;
}
}
</style>
我认为这就是你想要的;)
答案 2 :(得分:0)
更改此
animation: floatBubble 2s inifnate;
到这个
animation: floatBubble 25s infinite;
另外,如果您尝试将其向上移动屏幕而不是500px,请更改为-500px