如何實現點擊谷歌地圖？

在新的谷歌地圖中，當你在地圖上點擊時，它看起來像是一個圓形的動畫，從你點擊的位置展開然後消失。當您點擊道路時，會出現一個圓點，並且每隔幾秒鐘就會出現一次脈動。如何使用或不使用谷歌地圖來實現這種效果？如何實現點擊谷歌地圖？

換句話說，用戶可以點擊頁面上的空白空間，並具有相同的動畫點擊效果，即：

1）對HTML頁面或一個div內的任何地方點擊導致了一圈慢慢地從擴大用戶點擊大約5px，然後淡出並消失。 2）單擊HTML頁面上的任意位置或div內的任意位置，會在頁面上出現一個可能爲3px的點（第二個圓圈？），該點只會從點的輪廓點開始放大，並且會擴展爲5px。 ..一遍又一遍地消失。（點仍然在地方，只是動畫循環，繼續「脈動」

尋找最佳的解決方案可能是有或沒有任何庫）或HTML5從CSS3，使用Javascript（任何地方。

來源

2013-09-22 Setsuna

你問別人寫你的代碼嗎？或者你想對各種方法提出建議？如果是後者，您應該提供一些限制條件（例如，所需的瀏覽器支持）。只有CSS3和Javascript才能滿足您的需求，但只能在現代瀏覽器中使用。傳統支持需要像jQuery這樣的庫。 –

有趣的想法。之後一些擺弄，這裏是我做了

1）使用JavaScript來追加在單擊位置，我想出了this demo

相應的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）我不能重現你的意思這一個谷歌地圖，但是從你的描述，我想出了this demo

爲相應的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動畫的瀏覽器，列表可以找到here。回退類似的解決方案將使用相同的方法，但使用jQuery的.animate或類似的東西

如果動畫不支持，第一個將只是一個5px乘5px圈，刪除一秒後。第二個將是一個黑點，持續到文檔再次被點擊。

邊注：在當前狀態下它不會在IE瀏覽器，我相信，因爲它不支持document.getElementsByClassName

來源

2013-09-22 18:41:14

如何實現點擊谷歌地圖？

回答

相關問題