CSS3擴(kuò)散效果是一種非常實(shí)用的樣式技巧，它可以在網(wǎng)頁中實(shí)現(xiàn)非常炫酷的效果。下面就讓我們一起來學(xué)習(xí)一下如何使用CSS3實(shí)現(xiàn)擴(kuò)散效果吧！

.box {
position: relative;
}
.box::before {
content: '';
position: absolute;
z-index: -1;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: #fff;
border-radius: 50%;
animation: scale-up 1.5s forwards;
}
@keyframes scale-up {
0% {
transform: scale(0);
opacity: 1;
}
100% {
transform: scale(3);
opacity: 0;
}
}

上述代碼中，我們首先定義了一個(gè).box類，接著在.box類的偽元素:before中添加了一個(gè)圓形的背景，并使用border-radius屬性將其設(shè)置為圓形。然后，我們使用關(guān)鍵幀動(dòng)畫將其從0放大到3，并逐漸透明，從而實(shí)現(xiàn)了擴(kuò)散效果。

值得注意的是，我們在:before中添加了z-index: -1，使其在.box元素下方，從而實(shí)現(xiàn)了擴(kuò)散效果。

在實(shí)際應(yīng)用中，我們可以將擴(kuò)散效果應(yīng)用于按鈕、文字等元素，以增加頁面的動(dòng)感和活力，使網(wǎng)頁更具吸引力。