CSS3水波紋擴(kuò)散效果是一種常見的網(wǎng)頁(yè)設(shè)計(jì)效果，可以讓頁(yè)面看起來更加動(dòng)感和時(shí)尚。實(shí)現(xiàn)這種效果的方法有很多，比如使用html5的canvas標(biāo)簽、使用JavaScript的庫(kù)或插件等等。這篇文章將介紹如何使用CSS3來實(shí)現(xiàn)水波紋擴(kuò)散效果。

/* CSS樣式代碼 */
.btn{
display: inline-block;
position: relative;
padding: 15px 30px;
color: #fff;
font-size: 18px;
background-color: #3498db;
border-radius: 4px;
overflow: hidden;
}
.btn:hover:before{
opacity:1;
transform: scale(3);
}
.btn:before{
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
pointer-events: none;
background: radial-gradient(circle at center, rgba(255,255,255,0) 0%, rgba(255,255,255,0.1) 10%, rgba(255,255,255,0.3) 30%, rgba(255,255,255,0.5) 50%, rgba(255,255,255,0.2) 70%, rgba(255,255,255,0) 100%);
width: 200px;
height: 200px;
border-radius: 50%;
transition: all 0.8s ease-out;
z-index: -1;
opacity: 0;
}

以上代碼中，我們使用偽元素::before來創(chuàng)建水波紋效果的視覺效果。當(dāng)鼠標(biāo)懸停在按鈕上時(shí)（即`.btn:hover:before`），偽元素出現(xiàn)，并通過給width、height、opacity等屬性設(shè)置不同的值，讓其呈現(xiàn)出擴(kuò)散的效果。

要注意的是，在偽元素里使用`pointer-events:none;`來防止水波紋影響按鈕的點(diǎn)擊事件。

總結(jié)來說，CSS3水波紋擴(kuò)散效果是一種簡(jiǎn)單易用的網(wǎng)頁(yè)設(shè)計(jì)技巧，我們可以通過使用偽元素和一些基本的CSS樣式，來輕松地實(shí)現(xiàn)這種令人喜歡的效果。