CSS实现地图中定位的波动效果

地图中的定位效果：

看到这么酷炫的效果，你是不是很想知道是怎么做到的？

Step 1

创建一个 container div，并选取一张地图背景图片，CSS设置如下：

#container {
    position: relative;
    width: 600px;
    height: 500px;
    background: url(map.jpg);
}

这里有两点需要注意：

• 将 position 设置为 relative，是为了后面设置坐标点位置时参考方便。

• background 的 url 中是一个本地的图片，请记得应该是自己本地的图片路径及名称。

Step 2

创建一个坐标点，CSS如下：

#point:before {
    content: '';
    width: 10px;
    height: 10px;
    background-color: blue;
    border-radius: 50%;
    position: absolute;
    left: 220px;
    top: 220px;
    z-index: 2;
}

这里的 left 和 top 表示的是地图中我们要标识的坐标点。