嗨,我正在尝试使用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>
试试这个:
#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;
}
}