CSS3的出现为我们实现更加丰富多彩的效果提供了更多的可能，其中包括水波纹形状。这种效果可以让我们的网页看起来更加生动有趣，让用户更有趣味性的体验。

/* HTML代码 */
<div class="water-ripple">
<div class="ripple"></div>
</div>
/* CSS代码 */
.water-ripple {
position: relative;
width: 300px;
height: 300px;
background-color: #ccc;
overflow: hidden;
}
.ripple {
position: absolute;
width: 100px;
height: 100px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border-radius: 50%;
background-color: rgba(255, 255, 255, 0.3);
animation: wave 2s linear infinite;
}
@keyframes wave {
0% {
transform: scale(1);
opacity: 0.5;
}
100% {
transform: scale(2);
opacity: 0;
}
}

在上面的代码中，我们使用了一个div容器和一个波浪形状的div元素来实现水波纹的效果。容器的背景色为灰色，而波浪形状使用了白色的rgba值，使其半透明。同时，我们使用了动画效果来实现每隔一段时间波浪形状的变化。

需要注意的是，这种效果需要浏览器支持CSS3动画，因此在使用时需要进行浏览器兼容性的考虑。

总之，CSS3水波纹形状是一种非常有趣的效果，可以为我们的网页增加更多的乐趣性和趣味性。通过适当的调整，我们还可以实现不同样式的水波纹效果，并应用于不同的设计场景中。