CSS是一種用于網(wǎng)頁(yè)設(shè)計(jì)的語(yǔ)言，它可以實(shí)現(xiàn)許多有趣的效果，其中包括波紋擴(kuò)散效果。這種效果可以讓鼠標(biāo)在網(wǎng)頁(yè)上移動(dòng)時(shí)，產(chǎn)生類似水波紋的動(dòng)態(tài)效果，非常華麗而具有吸引力。

.btn {
position: relative;
display: inline-block;
padding: 12px 30px;
background-color: #007bff;
color: #fff;
font-size: 20px;
text-align: center;
}
.btn:before {
content: "";
display: block;
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
background-color: rgba(255, 255, 255, 0.6);
border-radius: 100%;
opacity: 0;
transform: translate(-50%, -50%);
}
.btn:hover:before {
animation: ripple 0.6s linear forwards;
}
@keyframes ripple {
from {
opacity: 1;
width: 0;
height: 0;
}
to {
opacity: 0;
width: 200px;
height: 200px;
}
}

這段代碼中，我們首先定義了一個(gè)網(wǎng)頁(yè)按鈕，將其設(shè)置為display:inline-block，padding:12px 30px，背景顏色為#007bff，字體顏色為#fff，字號(hào)為20px。然后使用:before選擇器，在按鈕上方創(chuàng)建一個(gè)圓形元素，并設(shè)置圓形的初始顏色為rgba(255, 255, 255, 0.6)，即半透明白色。接下來(lái)，我們使用:hover:before選擇器，當(dāng)鼠標(biāo)經(jīng)過(guò)按鈕時(shí)，為圓形添加擴(kuò)散動(dòng)畫效果，即animation:ripple。

在動(dòng)畫的關(guān)鍵幀中，我們將圓形的初始寬度和高度設(shè)置為0，并且透明度設(shè)置為1。在動(dòng)畫的最終幀中，我們將圓形的寬度和高度設(shè)置為200px，并且將透明度設(shè)置為0，表示動(dòng)畫執(zhí)行完畢，圓形應(yīng)該消失。這樣，我們就可以實(shí)現(xiàn)一個(gè)簡(jiǎn)單而華麗的波紋擴(kuò)散效果。