svg和css实现波浪动效

效果：

截图有点模糊~

实现：

《svg教程》

//html

  

　

//css
*{
  margin:0;
  }
  body{
    background: #2196f3;
  }
  .wave-container{
    margin-top:200px;
    width: 100%;
    height: 150px;
  }
  .parallax>use {
      animation: wave-move 12s linear infinite
  }

  .parallax>use:nth-child(1) {
      animation-delay: -2s
  }

  .parallax>use:nth-child(2) {
      animation-delay: -2s;
      animation-duration: 5s
  }

  .parallax>use:nth-child(3) {
      animation-delay: -4s;
      animation-duration: 3s
  }
  @keyframes wave-move {
    0% {
        transform: translate(-90px,0)
    }

    100% {
        transform: translate(85px,0)
    }
  }

　　

　

-----------------------------------------

 

 

　　

 

转载于:https://www.cnblogs.com/leaf930814/p/8650128.html