1

在新的谷歌地图中，​​当您点击地图时，它看起来像一个从您点击的点开始动画的圆圈，然后展开然后消失。当您单击一条道路时，会出现一个点，并且似乎每隔几秒钟就会跳动一次。无论有没有谷歌地图，如何实现这一效果？

换句话说，用户可以单击页面上的空白区域并具有相同的动画单击效果，其中：

1) 点击 HTML 页面或 div 内的任意位置会导致圆圈从用户点击的位置慢慢扩大到大约 5px，然后淡出并消失。

2) 单击 HTML 页面或 div 中的任意位置会导致页面上出现一个可能为 3px 的点，并且（第二个圆圈？）从仅带有轮廓的点开始放大，扩展为 5px...淡出然后消失……一遍又一遍。（点留在原地，只是继续“脉动”的动画圆圈

寻找最佳解决方案可以是 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）我无法在谷歌地图上重新创建你对这个的意思，但根据你的描述我想出了这个演示

相应的 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 动画的浏览器，可以在此处找到列表。类似的后备解决方案是使用相同的方法，但使用 jQuery.animate或类似的东西

如果不支持动画，第一个只是一个 5px x 5px 的圆圈，一秒钟后删除。第二个将是一个黑点，一直持续到再次单击文档。

旁注：在目前的状态下，我相信它在 IE 中不起作用，因为它不支持document.getElementsByClassName

于 2013-09-22T18:41:14.310 回答