Css实现水波纹效果

Canvas-水波图效果.gif

代码地址：gitee.com/wave/index.…

一、使用Canvas实现第一张图片效果

因为canvas绘制的圆形border边框效果不是很好，所以整体体验不是很好（没有圆圈的那种层次感）。

1.代码实现逻辑：

• 使用painting绘制各个圆圈及带有背景色的圆圈

• 动画效果使用timer改变波纹圆圈的半径，并执行重新绘制painting

二、使用css样式实现第二张图片效果

圆圈的border效果有层次的感觉，动画效果也比较自然。

• 动画实现原理：

  .circle2-border {
      animation: mymove 1.2s ease-out infinite;
  }
  @keyframes mymove {
      0%{
          border: 1px solid rgba(4, 30, 86, 0.15);
      }
      25% {
          border: 5px solid rgba(4, 30, 86, 0.13);
      }
      50% {
          border: 10px solid rgba(4, 30, 86, 0.12);
      }
      75% {
          border: 15px solid rgba(4, 30, 86, 0.11);
      }
      100% {
          border: 20px solid rgba(4, 30, 86, 0.10);
      }
  }
  

• 通过动画时间百分比设置border边框的宽度

页面实现整体效果：