CSS動(dòng)畫可以實(shí)現(xiàn)很多有趣的效果，比如讓一個(gè)元素在頁面上擴(kuò)散出去就是一種很酷的效果。下面就來介紹一下如何使用CSS實(shí)現(xiàn)地圖的擴(kuò)散效果。

.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;
}
}

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

接下來就是添加動(dòng)畫效果。我們給.circle元素設(shè)置了一個(gè)名為wave的動(dòng)畫，在動(dòng)畫中設(shè)置了兩個(gè)關(guān)鍵幀，一個(gè)是0%的狀態(tài)，一個(gè)是100%的狀態(tài)。0%狀態(tài)下圓形元素的寬度和高度都為0，透明度為1，也就是初始狀態(tài)，最后一幀變?yōu)橥暾?00×200大小，并將透明度設(shè)為0，也就是動(dòng)畫結(jié)束的狀態(tài)。

最后，在HTML中添加一個(gè)名為.map的元素，并在其中添加多個(gè).circle元素即可。每個(gè)圓形元素可以通過在元素上添加不同的過渡延時(shí)時(shí)間，產(chǎn)生不同的擴(kuò)散效果。