CSS3高仿百度外卖头像波浪效果

好Q啼的头像，说好的波浪捏，浪到哪里去了，别急，静静欣赏动态效果：链接：https://pan.baidu.com/s/1gfAM3y7 密码：wxn6

技术：
1、css water wave 实现波浪效果
2、css translateY 实现上下移动
3、css rotate 实现左右滚动

4、你可以根据时间不同设定不同速度，自由选择

@keyframes move_wave {
    0% {
        transform: translateX(0) translateZ(0) scaleY(1)
    }
    50% {
        transform: translateX(-25%) translateZ(0) scaleY(0.55)
    }
    100% {
        transform: translateX(-50%) translateZ(0) scaleY(1)
    }
}


.waveAnimation .waveTop {
  animation: move-wave 3s;
   -webkit-animation: move-wave 3s;
   -webkit-animation-delay: 1s;
   animation-delay: 1s;
}

@-webkit-keyframes bounce-down {
  25% {
    -webkit-transform: translateY(-10px);
  }
  50%, 100% {
    -webkit-transform: translateY(0);
  }
  75% {
    -webkit-transform: translateY(10px);
  }
}
@keyframes bounce-down {
  25% {
    transform: translateY(-10px);
  }
  50%, 100% {
    transform: translateY(0);
  }
  75% {
    transform: translateY(10px);
  }
}
.animate-bounce-down{
  -webkit-animation: bounce-down 2.3s linear infinite;
  animation: bounce-down 2.3s linear infinite;
}

@keyframes bounce-rotate {
  25% {
    transform:rotate(-25deg);
  }
  50%, 100% {
    transform:rotate(-0deg);
  }
  75% {
    transform:rotate(75deg);
  }
}
.animate-bounce-rotate{
  animation: bounce-rotate 8.3s linear infinite;
}

需要所有源代码，可加QQ490647751回复‘CSS3高仿百度外卖头像波浪效果’获取。