CSS动画实例：圆的涟漪扩散
设页面中有，定义.circle的样式规则绘制一个半径为75px，边框厚度为4px的圆，再定义关键帧，使得圆从不可见到可见，再到放大后又不可见。
编写的HTML文件如下。
在浏览器中打开包含这段HTML代码的html文件，可以呈现出如图1所示的动画效果。
图1 圆的放大（一）
若将上面文件中的“border: 4px solid #000;”改写为“background: #000;”，则呈现出如图2所示的动画效果。
图2 圆的放大（二）
在图1的基础上再增加一个圆，并且新增加的圆延迟0.5s执行动画过程。编写如下的HTML文件。
在浏览器中打开包含这段HTML代码的html文件，可以呈现出如图3所示的动画效果。
图3 两个圆的放大（一）
同样，若将上面文件中的“border: 10px solid #000;”改写为“background: #000;”，则呈现出如图4所示的动画效果。
图4 两个圆的放大（二）
增加到4个圆，其中一个圆保持不变，另外三个圆按给定延迟执行放大动画过程，形成圆的涟漪扩散效果。编写的HTML文件内容如下。
在浏览器中打开包含这段HTML代码的html文件，可以呈现出如图5所示的动画效果。
图5 圆的涟漪扩散
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
