CSS实战 - 波纹扩散效果

1、实现效果

效果一:涟漪扩散效果

CSS实战 - 波纹扩散效果_第1张图片

效果二:波动扩散效果                      

CSS实战 - 波纹扩散效果_第2张图片

2、实现原理

在 div 里定义圆形,使用 css 的动画,让圆形的大小由小到大进行变化。
① 涟漪扩散:

定义了3个带边框的空圆,让这3个圆形由小到大进行变化,为了体现渐进扩散的效果,使用动画延时,规定

每个圆形延时时间

 ② 波动扩散:

定义了1个带背景色的圆,让这个圆形由小到大进行变化


3、具体代码




	
	CSS实战 - 波纹扩散效果
	
	

	


	


你可能感兴趣的:(CSS实战)