CSS3 水波球是一種常用的網(wǎng)頁設(shè)計(jì)效果，可以為網(wǎng)頁增添一些立體感。在實(shí)現(xiàn)過程中，需要使用CSS3技術(shù)來完成。

.wave-ball {
width: 200px;
height: 200px;
background-color: #59C2FF;
border-radius: 50%;
position: relative;
overflow: hidden;
}
.wave-ball::before {
content: "";
position: absolute;
bottom: 0;
right: 0;
width: 300px;
height: 300px;
background: linear-gradient(to top, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0));
border-radius: 50%;
transform: translate(50%, 50%);
animation: wave 2s linear infinite;
}
@keyframes wave {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}

代碼中，首先需要?jiǎng)?chuàng)建一個(gè)圓形的div，并設(shè)置其寬、高和背景顏色。然后通過偽類:before為該div添加一個(gè)圓形的背景，通過設(shè)置背景的漸變，實(shí)現(xiàn)水波紋效果。最后，為偽類:before添加一個(gè)旋轉(zhuǎn)的動(dòng)畫，讓水波紋看起來更加立體。