0

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

我将有一张世界地图，上面有不同大小的图标。这些图标将像云一样排列在组中，我想我只是将一组的项目浮动在一个固定的容器中。

为了使它更有机，我想添加一个悬停效果，以便一组项目在鼠标悬停时做出反应，轻微移动或漂浮，就好像它们在碗里游泳一样，鼠标稍微移动水。

可以仅使用 jquery animate() 来完成吗？我不确定它是否会以流畅和“有机”的动画结束，当它们只是通过 css 浮动定位时会影响整个组。

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

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

4

1 回答 1

0

您可以使用 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/

于 2013-09-17T13:55:28.283 回答