使用css3怎么实现一个冲击波效果

使用css3怎么实现一个冲击波效果？相信很多没有经验的人对此束手无策，为此本文总结了问题出现的原因和解决方法，通过这篇文章希望你能解决这个问题。

成都创新互联公司是一家专业提供海港企业网站建设,专注与成都做网站、网站设计、H5高端网站建设、小程序制作等业务。10年已为海港众多企业、政府机构等服务。创新互联专业的建站公司优惠进行中。

实现思路：

观察波由小变大，涉及的css3属性变化有width,height,left,top,opacity,首先通过伪类实现冲击波层，同时需要设置冲击波前后的中心点位置（这里涉及一点点数学知识:画图计算两个点的位置),最后设置transition-duration: 0实现瞬间变化，ps学习到用a:active可以模拟鼠标实现点击的效果

简单画下图（很菜）：

实现的代码：

  
  
  
  
  
  
  
  
  
  点我