css 波纹扩散_css3实现支付宝波纹扩散的功能原理

今天讲一个比较简单的css3的特效吧。

之前在使用支付宝的时候，我偶然间发现支付宝有一个页面，有一个波纹扩散的特效，还挺有意思。

正巧这几天，我在开发小程序的时候，也遇到了这个需求，所以简单做了个demo。知乎视频​www.zhihu.com

还是分析需求

从特效上看，是类似水波的效果，圆形的边缘向外扩散，且每一层的扩散的特效(包括延展的宽度，和波纹的深浅)都是不一样。

好，现在来分析需求，我们以3个圆圈为例，最外环不动，第二环向外扩展，第三环向外扩展且扩散半径大于第二环。

在开始的时候，环是没有动态效果的，三个环依次层叠在一起。

html结构如下：

html结构如下：

css结构如下：

.box{

.circle-common{

position:absolue;

}

.circle-one{

z-index:100

}

.circle-two{

z-index:50

}

.circle-three{

z-index:1

}

}

像这样，让环从内往外依次排列，最内侧的圆形在Z轴上最大，依次往下递减50。

好，现在我们来让第2层和第3层的园，规律性向外拓展