CSS上滑波紋效果是一種常見的網頁設計效果之一，可以通過CSS來實現。具體實現方式如下：

.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;
}
}

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