Question

我希望使用jquery和css在div中平滑移动图像。我已经检查了旋转和动画。但没有任何方法可以按照我需要的方式工作。

<div class="baloon" style="position:fixed;left:0px;top:160px;">
<img id="rot" class="rotate1" src="http://artinnmedia.com/images/baloon5.png">
</div>

检查此http://artinnmedia.com/ ...气球必须在该div内的两个方向上平滑移动

请有人帮我解决这个问题

Answer 1

我认为你正在寻找浮动效果。这实际上只是向上移动到A点并向下移动到B点。您可以使用transform:translateY();重现这一点：

#rot
{
    position: absolute;

    -webkit-animation: Floatingy 3s infinite ease-in-out;
}

@-webkit-keyframes Floatingy {
    from {
        -webkit-transform:translateY(0px);
    }
    65% {
        -webkit-transform:translateY(15px);
    }
    to {
        -webkit-transform: translateY(-0px);
    }
}

我使用ease-in-out因此会慢慢降低每个点的速度。

jquery气球移动效果

1 个答案:

jsFiddle