CSS3動畫一直是前端開發(fā)人員的熱門話題，它為網(wǎng)站增色不少。而其中的圓形擴散效果更是吸引人眼球的一種動畫效果。

/* CSS代碼 */
.circle {
width: 10px;
height: 10px;
background-color: #fff;
border-radius: 50%;
position: absolute;
top: 50%;
left: 50%;
z-index: 9999;
animation: pulse 2s infinite;
}
@keyframes pulse {
0% {
transform: scale(0);
opacity: 0.0;
}
25% {
transform: scale(0.1);
opacity: 0.3;
}
50% {
transform: scale(0.3);
opacity: 0.6;
}
75% {
transform: scale(0.5);
opacity: 0.1;
}
100% {
transform: scale(1.0);
opacity: 0.0;
}
}

在這段代碼中，首先定義了一個寬高為10像素的圓形，然后利用border-radius屬性將其變成圓形。接著，使用position屬性將其定位到屏幕中央，并使用animation屬性設(shè)置其動畫效果為pulse。

在@keyframes pulse中，定義了從0%到100%的圓形擴散動畫，其中transform: scale()屬性控制圓形大小的變化，opacity控制圓形透明度。

通過這樣的CSS3動畫制作，我們可以實現(xiàn)非常炫酷的圓形擴散效果，給網(wǎng)站增添不少視覺沖擊力。