CSS動畫可以實現很多有趣的效果，比如讓一個元素在頁面上擴散出去就是一種很酷的效果。下面就來介紹一下如何使用CSS實現地圖的擴散效果。

.map{
width: 200px;
height: 200px;
position: relative;
}
.circle{
width: 50px;
height: 50px;
border-radius: 50%;
background-color: rgba(255, 255, 255, 0);
border: 8px solid #fff;
position: absolute;
animation: wave 1s ease-out infinite;
}
@keyframes wave {
0% {
width: 0;
height: 0;
opacity: 1;
}
100% {
width: 200px;
height: 200px;
opacity: 0;
}
}

上面的代碼中，我們首先在一個名為.map的元素上設置了position屬性相對定位，然后在這個元素內部添加了一個圓形元素.circle。圓形元素的背景色為rgba(255, 255, 255, 0)，也就是透明的白色，同時給元素設置了8px的白色邊框，因此只有邊框是可見的。

接下來就是添加動畫效果。我們給.circle元素設置了一個名為wave的動畫，在動畫中設置了兩個關鍵幀，一個是0%的狀態，一個是100%的狀態。0%狀態下圓形元素的寬度和高度都為0，透明度為1，也就是初始狀態，最后一幀變為完整的200×200大小，并將透明度設為0，也就是動畫結束的狀態。

最后，在HTML中添加一個名為.map的元素，并在其中添加多個.circle元素即可。每個圓形元素可以通過在元素上添加不同的過渡延時時間，產生不同的擴散效果。