鲁达 在我们使用的手机软件中，会有很多非常好的交互效果，通过css3也可以实现很多各种酷炫的交互效果。
现在就看一下按钮中比较常见的冲击波交互效果如何通过css3快速书写出来。
效果如图所示：
效果原理：
主要是通过css3的:after伪类和过渡属性transition来进行控制。先制作一个圆形冲击波层，当激活按钮的时候让冲击波层瞬间变成0，释放后从0过渡到最大范围，从而形成冲击波效果；以下是实现步骤：
1、先准备基础结构和样式；
2、通过伪类:after 给a添加一个冲击波层，特殊的地方在于为了保证让冲击波效果从中间扩散，需要设置层的位置位于中间；
3、添加激活按钮的效果，通过:active 给:after 设置瞬间过渡效果，这一步特殊的地方在于需要将过渡时间设置为0，让冲击波图层瞬间为0，释放开的时候从0过渡到最大范围；激活效果的不同位置可以形成不同的交互效果；可以自行测试；
总结：交互效果的实现是利用了伪类，:after作用非常强大，这只是它其中的一种效果，除此之外，还能实现更加强大的交互效果，感兴趣的朋友可以多尝试。制作出了不妨也发到我们小码哥论坛上欣赏欣赏。
更详细编码，请登录;tid=2526&extra=