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;}
}
如果觉得《html svg波浪 CSS实现svg图片水纹波浪流动效果》对你有帮助,请点赞、收藏,并留下你的观点哦!