中心擴散css是一種CSS動畫效果，它是基于CSS3中的animation和radial-gradient屬性實現的。當應用這種效果時，一個元素會在其中心放出漸變色彩圓圈，并且這個圓圈會逐漸跨越整個元素，讓視覺效果看起來非常美觀。

.circles {
width: 100px;
height: 100px;
background-color: #fff;
border: 2px solid #000;
position: relative;
}
.circles::after {
content: "";
position: absolute;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
transform: scale(0);
background-color: rgba(0, 0, 0, 0.2);
animation: ripple 1s linear infinite;
border-radius: 50%;
box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.1);
}
@keyframes ripple {
0% {
transform: scale(0);
}
100% {
transform: scale(2.5);
opacity: 0;
}
}

上面的代碼展示了一個簡單的中心擴散效果。我們首先為外層的元素設置了寬度、高度和邊框等樣式，然后通過::after偽類添加一個名為ripple的動畫。通過這個動畫，圓形漸變色彩會逐漸從0%的大小開始擴散到100%的大小，最終消失。通過box-shadow屬性，我們還可以為這個漸變效果添加一些細微的陰影效果，讓它看起來更加自然。

如果你想要嘗試中心擴散效果，只需要在自己的CSS代碼中加入上述的樣式，然后在需要應用的元素上使用circles類名即可實現效果。這種效果通常用于鼠標懸停時的效果展示，可以大大提升你的UI設計水平。