CSS上滑波紋效果是一種常見的網(wǎng)頁設(shè)計(jì)效果之一，可以通過CSS來實(shí)現(xiàn)。具體實(shí)現(xiàn)方式如下：

.button{
position: relative;
overflow: hidden;
background-color: #333;
color: #fff;
border: none;
padding: 10px 20px;
font-size: 16px;
text-transform: uppercase;
letter-spacing: 2px;
}
.button:hover::before{
content: '';
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
width: 0;
height: 0;
background: rgba(255,255,255,0.2);
border-radius: 50%;
opacity: 0.3;
transition: all .8s ease-in-out;
}
.button:hover::after{
content: '';
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
width: 100%;
height: 100%;
background: rgba(255,255,255,0.2);
border-radius: 50%;
opacity: 0.3;
transition: all .8s ease-in-out;
}
.button:hover::before,.button:hover::after{
animation: wave 2s linear infinite;
}
@keyframes wave{
0%{
transform: scale(1);
opacity: 0.3;
}
50%{
transform: scale(2.5);
opacity: 0;
}
100%{
transform: scale(5);
opacity: 0;
}
}

通過以上代碼，我們可以先給按鈕設(shè)置樣式，然后在按鈕的:hover偽類中添加:before和:after偽類，分別實(shí)現(xiàn)兩個(gè)圓形元素，當(dāng)鼠標(biāo)懸停在按鈕上時(shí)，這兩個(gè)圓形元素會像波紋一樣擴(kuò)散開來，在不斷縮小中循環(huán)播放，從而實(shí)現(xiàn)了CSS上滑波紋效果。