1

新しい Google マップでは、マップをクリックすると、クリックしたポイントから円がアニメーション表示され、拡大してから消えるように見えます。道路をクリックするとドットが表示され、数秒ごとに脈動して見えます。Googleマップの有無にかかわらず、どうすればこの効果を達成できますか?

つまり、ユーザーはページの空白スペースをクリックして、同じアニメーション クリック効果を得ることができます。

1) HTML ページまたは div 内の任意の場所をクリックすると、円がユーザーがクリックした場所から約 5px までゆっくりと拡大し、フェードアウトして消えます。

2) HTML ページまたは div 内の任意の場所をクリックすると、おそらく 3 ピクセルのドットがページに表示され、(2 番目の円?) ドットのポイントからアウトラインのみが拡大し、5 ピクセル拡大します... フェードアウトしますそして消える... 何度も何度も。(ドットはその場に留まり、「脈動」し続けるアニメーションの円だけです

最適なソリューションを探すには、CSS3、Javascript (ライブラリの有無にかかわらず)、または HTML5 のどこでもかまいません。

4

1 に答える 1

3

興味深いアイデアです。いくつかいじった後、ここに私が行ったアプローチがあります

1) JavaScript を使用して、クリックした場所に新しい要素を追加し、いくつかの CSS アニメーションを追加して、このデモを作成しました

対応する CSS アニメーション:

@keyframes grow {
    0% {
        width: 5px;
        height: 5px;
        margin-top: -2.5px;
        margin-left: -2.5px;
    }
    50% {
        margin-top:-7.5px;
        margin-left: -7.5px;
        width: 15px;
        height: 15px;
        opacity: 1;
    }
    100% {
        margin-top:-12.5px;
        margin-left: -12.5px;
        width: 25px;
        height: 25px;
        opacity: 0;
    }
}

2) Google マップでこれを意味するものを再現できませんでしたが、あなたの説明からこのデモを思いつきました

それに対応する CSS アニメーション:

@keyframes pulse {
    0% {
        width: 5px;
        height: 5px;
        margin-top: -4.5px;
        margin-left: -4.5px;
    }
    100% {
        margin-top:-14.5px;
        margin-left: -14.5px;
        width: 25px;
        height: 25px;
    }
}

これらのアプローチは、CSS3 アニメーションをサポートするすべてのブラウザーで機能します。リストはこちらにあります。代替の同様の解決策は、同じアプローチを使用することですが、.animate代わりにjQueryまたは同様のものを使用します

アニメーションがサポートされていない場合、最初は単純に 5 ピクセル x 5 ピクセルの円になり、2 秒後に削除されます。2 つ目は、ドキュメントが再度クリックされるまで続く黒い点です。

補足: 現在の状態では IE では動作しません。サポートしていないためだと思います。document.getElementsByClassName

于 2013-09-22T18:41:14.310 に答える