CSS实现svg图片水纹波浪流动效果
里面的其他颜色是自己加的，把下面代码自己改改就可以
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>标题</title>
<style>
body { margin:0; background:red; }
h1 { font-family: 'Lato', sans-serif; font-weight:300; letter-spacing: 2px; font-size:48px;}
p { font-family: 'Lato', sans-serif; letter-spacing: 1px; font-size:14px; color: #333333;}
.header { position:relative; text-align:center;
background: linear-gradient(60deg, rgba(84,58,183,1) 0%, rgba(0,172,193,1) 100%);
background:rgb(85,128,246);
color:white;
border-bottom:1px solid #ccc;
}
.logo { width:50px; fill:white; padding-right:15px; display:inline-block; vertical-align: middle;}
.inner-header { height:65vh; width:100%; margin: 0; padding: 0;}
.flex { /*Flexbox for containers*/ display: flex; justify-content: center; align-items: center; text-align: center;}
.waves { position:relative; width: 100%; height:15vh; margin-bottom:-7px; /*Fix for safari gap*/ min-height:100px; max-height:150px;}
.content { position:relative; height:20vh; text-align:center; background-color: white;}
/* Animation */
.parallax >use { animation: move-forever 25s cubic-bezier(.55,.5,.45,.5) infinite;}
.parallax >use:nth-child(1) { animation-delay: -2s; animation-duration: 7s;}
.parallax >use:nth-child(2) { animation-delay: -3s; animation-duration: 10s;}
.parallax >use:nth-child(3) { animation-delay: -4s; animation-duration: 13s;}
.parallax >use:nth-child(4) { animation-delay: -5s; animation-duration: 20s;}
@keyframes move-forever { 0% { transform: translate3d(-90px,0,0); } 100% { transform: translate3d(85px,0,0); }}
/*Shrinking for mobile*/
@media (max-width: 768px) { .waves { height:40px; min-height:40px; } .content { height:30vh; } h1 { font-size:24px; }
}
</style>
</head>
<body>
<div>
<div class="inner-header flex">
</div>
<div>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 24 150 28" preserveAspectRatio="none" shape-rendering="auto">
<defs>
<path id="gentle-wave" d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z" />
</defs>
<g>
<use xlink:href="#gentle-wave" x="48" y="0" fill="rgba(85,128,246,0.7" />
<use xlink:href="#gentle-wave" x="48" y="3" fill="rgba(255,255,255,0.5)" />
<use xlink:href="#gentle-wave" x="48" y="5" fill="rgba(255,255,255,0.3)" />
<use xlink:href="#gentle-wave" x="48" y="7" fill="rgba(0,0,0,0.1)" />
</g>
</svg>
</div>
</div>
</body>
</html>