css3实现冲击波效果的示例代码
本篇文章主要介绍了css3实现冲击波效果的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
近日，很多浏览器按钮点击会出现以下冲击波效果，出于好奇，参考网上的资料，将这个效果研究实现下。
实现思路：
观察波由小变大，涉及的css3属性变化有width,height,left,top,opacity,首先通过伪类实现冲击波层，同时需要设置冲击波前后的中心点位置（这里涉及一点点数学知识:画图计算两个点的位置),最后设置transition-duration: 0实现瞬间变化，ps学习到用a:active可以模拟鼠标实现点击的效果
简单画下图（很菜）：
实现的代码：
实现的效果：
github代码：实现冲击波代码
备注：2018/01/09更新了考虑按钮长度不确定的情况，同时github代码已经更新
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持0133技术站。
标签：