0

微妙なアニメーション効果を実現するためのプラグインまたはチュートリアルをウェブで検索しましたが、これまでのところ成功していません:(

さまざまなサイズのアイコンが配置された世界地図を作成します。これらのアイコンはグループのように雲状に配置されます。固定されたコンテナー内で 1 つのグループのアイテムをフロートするだけだと思います。

より有機的なものにするために、ホバー効果を追加したいと思います。これにより、1 つのグループのアイテムがマウスオーバーに反応し、まるでボウルの中で泳いでいるかのようにわずかに移動または浮遊し、マウスが水をわずかに動かします。

これは 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 に答える