扇形擴(kuò)散效果是一種非常常見(jiàn)的動(dòng)畫(huà)效果，可以讓圖片或者文字在四周形成類(lèi)似扇形的欣賞效果。在CSS3中，我們可以使用一些屬性來(lái)實(shí)現(xiàn)這一效果。

/* 扇形擴(kuò)散效果 */
.box {
width: 50px;
height: 50px;
border-radius: 50%;
position: relative;
animation: spread 1s linear forwards;
}
/* 擴(kuò)散的動(dòng)畫(huà) */
@keyframes spread {
0% {
box-shadow: 0 0 0 0 transparent,
0 0 0 0 transparent,
0 0 0 0 transparent,
0 0 0 0 transparent;
}
100% {
box-shadow: 0 0 0 50px rgba(0, 0, 0, 0.4),
0 0 0 100px rgba(0, 0, 0, 0.2),
0 0 0 150px rgba(0, 0, 0, 0.1),
0 0 0 200px rgba(0, 0, 0, 0);
}
}

上面的代碼中，我們使用了box-shadow屬性來(lái)實(shí)現(xiàn)扇形的效果。通過(guò)設(shè)置多個(gè)box-shadow，可以形成多個(gè)扇形的效果，從而實(shí)現(xiàn)擴(kuò)散的效果。

box-shadow屬性中的四個(gè)參數(shù)分別為水平偏移量、垂直偏移量、模糊半徑和陰影擴(kuò)散半徑。通過(guò)改變這些參數(shù)的大小，我們可以得到不同大小和形狀的扇形效果。

扇形擴(kuò)散效果可以用于很多地方，比如作為圖片的hover效果，或者作為loading動(dòng)畫(huà)效果等等。