圓形擴散效果是一個非常炫酷的效果，可以在很多場合應(yīng)用，比如在網(wǎng)頁中的按鈕、文字、圖片上，可以讓網(wǎng)頁看起來更加生動、有趣。

// css代碼
button {
padding: 10px 20px;
color: #fff;
background-color: #00BFFF;
border: none;
border-radius: 50px;
position: relative;
overflow: hidden;
}
button:after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
background-color: #fff;
border-radius: 50%;
transform: translateX(-50%) translateY(-50%);
transition: width 0.3s ease, height 0.3s ease;
}
button:hover:after {
width: 600px;
height: 600px;
}

首先，我們需要選中要加入圓形擴散效果的元素，這里我們選用按鈕元素。在按鈕的樣式中，設(shè)置按鈕的邊框為none，將按鈕的圓角半徑設(shè)置為50px，這樣就把按鈕變成了一個圓形。由于我們需要在按鈕的中央加入圓形效果，因此需要設(shè)置按鈕的position為relative以及overflow為hidden。

接下來是設(shè)置圓形擴散效果的樣式。使用:before或:after偽元素，將content的屬性值設(shè)置為空，即沒有實際內(nèi)容，再將偽元素的position設(shè)置為絕對定位，top和left設(shè)置為50%，即居中。然后設(shè)置偽元素的寬度、高度、背景顏色、圓角半徑，這里的寬度和高度需要我們使用hover時才會出現(xiàn)，因此初始值設(shè)為0。最后，設(shè)置偽元素的過渡效果，這樣在hover時，寬度和高度才能有一個動畫效果。

在:hover的狀態(tài)下，將偽元素的寬度和高度變大，觀察到按鈕中央的圓形效果隨著鼠標的位置擴散，并且有一個圓形呈現(xiàn)的過程，非常炫酷。

通過這個簡單的css代碼，實現(xiàn)了圓形擴散效果，可以運用到很多應(yīng)用場合，為網(wǎng)頁添加更多的生動、炫酷的效果。