css3 水波动画 |css边框多种颜色

水波动画是一种模仿水波效果的动画，可以在用户与Web页面进行交互时呈现出来。这种动画效果能够让用户感觉到页面的深度和真实感，并且能够增加用户体验及页面交互性。

.wave {
width: 300px;
height: 300px;
position: relative;
overflow: hidden;
}
.wave:before {
content: "";
display: block;
width: 500px;
height: 500px;
position: absolute;
top: -100px;
left: calc(50% - 250px);
border-radius: 50%;
background-color: rgba(255, 255, 255, .4);
transform: scale(0);
transform-origin: center center;
animation: wave 2s linear infinite;
}
@keyframes wave {
0% {
transform: scale(0);
}
50% {
transform: scale(1);
}
100% {
transform: scale(0);
}
}

上述的CSS3代码通过伪元素实现了水波动画效果的呈现。 其中，使用了关键帧的技术，将波浪的大小进行动态变化。通过不断缩放波浪，就实现了水波动画的效果。

此外，大家可以通过设置其他CSS属性，如颜色、边框、平移等来自定义水波动画效果，从而让水波动画效果得到更多的创意和运用。

总之，水波动画是一种非常有趣和实用的动画效果，能够让Web页面更加生动、真实，增强用户体验，对于Web开发者来说是一项值得掌握的技术。