CSS圈圈擴散是一種非常有趣的效果，它可以讓一個簡單的圓形逐漸變大，直到它完全填滿整個頁面。通過使用CSS動畫和關鍵幀，您可以輕松地實現這種效果。

.circle {
width: 10px;
height: 10px;
border-radius: 50%;
background-color: #333;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
animation: pulse 2s ease-out infinite;
}
@keyframes pulse {
0% {
transform: translate(-50%, -50%) scale(0.4);
opacity: 1;
}
100% {
transform: translate(-50%, -50%) scale(3);
opacity: 0;
}
}

在這個例子中，我們定義了一個.circle類來創建圓形。通過設置寬度、高度和邊框半徑，我們可以確保該元素是一個圓。我們還將其定位在頁面的中心。

接下來，我們定義了一個名為pulse的關鍵幀動畫。這個動畫將在2秒內運行，并使用ease-out緩動函數進行平滑過渡。在0%時，圓形將被縮小到40%的大小，透明度為1。在動畫的結束處（100%），圓形將被放大到300%的大小并淡出。

最后，我們將這個動畫綁定到.circle類上，使其無限循環。

現在，我們已經成功實現了CSS圈圈擴散效果。您可以根據需要更改動畫的持續時間、縮放因子和其他屬性，以創造出獨特的效果。