css 水波纹(css图片水波纹)

CSS图片水波纹是一种很酷的效果，可以用在网站的背景、按钮等元素中，让页面看起来更加生动。

实现这种效果的原理是利用CSS3的transform和animation属性来创建动画效果。这里我们需要用到一个伪元素（:before或:after），将其设置为元素的背景并且放置在元素上方，然后通过动画让伪元素不断旋转扩散。

.demo {
position: relative;
background: url("water.png");
background-size: cover;
}
.demo:before {
content: "";
position: absolute;
top: -25%;
left: -25%;
width: 150%;
height: 150%;
background: url("water.png");
background-size: cover;
opacity: 0.5;
z-index: -1;
animation: rippling 3s linear infinite;
transform-origin: center center;
}
@keyframes rippling {
0% {
transform: scale(0.5, 0.5);
opacity: 0.5;
}
100% {
transform: scale(1.5, 1.5);
opacity: 0;
}
}

在上面的代码中，.demo是我们要添加水波纹效果的元素，其中伪元素:before用于设置背景、动画等。animation属性让伪元素不断进行扩散旋转，而transform-origin则设置动画的中心点。

最终的效果就是一个圆形的水波纹在元素上不断扩散出去，让页面变得更加生动。

如果要使用这种效果，只需要将上面的CSS代码中的.demo替换为自己要添加效果的元素即可。如果想要更改水波纹的颜色、大小等属性，只需要修改相应的CSS属性即可。