Question

我已经在网页上搜索了一个插件或教程来实现一种微妙的动画效果，到目前为止没有任何成功：（

我将要有一张带有不同尺寸图标的世界地图。这些图标将按照组的形式排列在云中，我想我只是将一组的项目浮动到一个固定的容器中。

为了让它变得更有机，我想添加一个悬停效果，这样一组的物品会在鼠标悬停时发生反应，轻微移动或浮动，好像它们在碗里游泳一样，鼠标稍微移动水

这可以用jquery animate（）完成吗？我不确定它是否会以平滑的“有机”动画结束，当它们通过css浮点放置时会影响整个组。

也许有人之前做过这样的事情，或者可以给我一个例子吗？

我真的很感激任何帮助！谢谢你。

Answer 1

您可以使用CSS3关键帧动画执行此操作。

例如：

// define keyframe animation. 
// All it really does is translateY (vertically) from 0 at the start, to 4px at 50% of the duration, then back to 0

@keyframes floating {
    0% {
        transform: translateY(0%);  
    }
    50% {
        transform: translateY(4px); 
    }   
    100% {
        transform: translateY(0%);
    }           
}

// Now apply the animation to an element on :hover
span:hover {
    animation-name: floating;  // the name of animation, assigned above
    animation-duration: 1.5s;  // how long should it take to go from 0 to 100%
    animation-iteration-count: infinite; // how many times it should repeat
    animation-timing-function: ease-in-out; // making it smoother due to easing
}

您需要添加供应商前缀以使其在实际浏览器中运行，这是一个使用Webkit（Chrome，Safari）的示例：http://jsfiddle.net/spQET/

在hover - jquery动画上稍微移动/浮动分组元素

1 个答案: