4

您好我正在尝试使用 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>
4

3 回答 3

9

试试这个：

工作示例

#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;
    }
}
于 2013-05-28T17:03:54.997 回答
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>

我想这就是你想要的；）

演示

于 2013-05-28T16:56:45.753 回答
0

改变这个

animation: floatBubble 2s inifnate;

对此

animation: floatBubble 25s infinite;

另外，如果您尝试将其向上移动到屏幕上，而不是 500px ，请更改为 -500px

于 2013-05-28T16:39:04.653 回答