html svg波浪 CSS实现svg图片水纹波浪流动效果

CSS实现svg图片水纹波浪流动效果

里面的其他颜色是自己加的，把下面代码自己改改就可以html>

标题

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:1pxsolid#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{/*Flexboxforcontainers*/display:flex;justify-content:center;align-items:center;text-align:center;}

.waves{position:relative;width:100%;height:15vh;margin-bottom:-7px;/*Fixforsafarigap*/min-height:100px;max-height:150px;}

.content{position:relative;height:20vh;text-align:center;background-color:white;}

/*Animation*/

.parallax>use{animation:move-forever25scubic-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;}

@keyframesmove-forever{0%{transform:translate3d(-90px,0,0);}100%{transform:translate3d(85px,0,0);}}

/*Shrinkingformobile*/

@media(max-width:768px){.waves{height:40px;min-height:40px;}.content{height:30vh;}h1{font-size:24px;}

}