CSS动画实例（圆的涟漪扩散）
设页面中有，定义.circle的样式规则绘制一个半径为75px，边框厚度为4px的圆，再定义关键帧，使得圆从不可见到可见，再到放大后又不可见。
编写的HTML文件如下。
.container
{
margin: 0 auto;
width: 300px;
height:300px;
position: relative;
display:flex;
justify-content:center;
align-items:center;
background:#d8d8d8;
border: 4px solid rgba(255, 0, 0, 0.9);
border-radius: 10%;
}
.circle
{
width:150px;
height:150px;
border: 4px solid #000;
border-radius: 50%;
animation: anim 1s ease-out infinite;
}
@keyframes anim
{
0%{ transform: scale(0); opacity: 0; }
50% { opacity: 1; }
100% { transform: scale(1); opacity: 0; }
}
在浏览器中打开包含这段HTML代码的html文件，可以呈现出如图1所示的动画效果。
文章图片
图1圆的放大（一）
若将上面文件中的“border: 4px solid #000; ”改写为“background: #000; ”，则呈现出如图2所示的动画效果。
文章图片
图2圆的放大（二）
在图1的基础上再增加一个圆，并且新增加的圆延迟0.5s执行动画过程。编写如下的HTML文件。
.container
{
margin: 0 auto;
width: 300px;
height:300px;
position: relative;
display:flex;
justify-content:center;
align-items:center;
background:#d8d8d8;
border: 4px solid rgba(255, 0, 0, 0.9);
border-radius: 10%;
}
.circle
{
position: relative;
width:150px;
height:150px;
border: 0 solid transparent;
border-radius: 50%;
}
.circle:before, .circle:after
{
content: '';
border: 10px solid #000;
border-radius: 50%;
width: inherit;
height: inherit;
position: absolute;
top: 0;
left: 0;
animation: anim 1s linear infinite;
opacity: 0;
}
.circle:after
{
animation-delay: .5s;
}
@keyframes anim
{
0%{ transform: scale(0); opacity: 0; }
50% { opacity: 1; }
100% { transform: scale(1); opacity: 0; }
}
在浏览器中打开包含这段HTML代码的html文件，可以呈现出如图3所示的动画效果。
文章图片
图3两个圆的放大（一）
同样，若将上面文件中的“border: 10px solid #000; ”改写为“background: #000; ”，则呈现出如图4所示的动画效果。
文章图片
图4两个圆的放大（二）
增加到4个圆，其中一个圆保持不变，另外三个圆按给定延迟执行放大动画过程，形成圆的涟漪扩散效果。编写的HTML文件内容如下。
.container
{
margin: 0 auto;
width: 300px;
height:300px;
position: relative;
display:flex;
justify-content:center;
align-items:center;
background:#d8d8d8;
border: 4px solid rgba(255, 0, 0, 0.9);
border-radius: 10%;
}
.circle
{
position:absolute;
width:60px;
height:60px;
border-radius:50%;
background-color:#666;
}
.circle:nth-child(1)
{
animation:anim 3s linear infinite;
}
.circle:nth-child(2)
{
animation:anim 3s linear 0.8s infinite;
}
.circle:nth-child(3)
{
animation:anim 3s linear 1.6s infinite;
}
@keyframes anim
{
from{opacity:1; transform:scale(0); }
to{opacity:0; transform:scale(4); }
}
在浏览器中打开包含这段HTML代码的html文件，可以呈现出如图5所示的动画效果。
文章图片
【CSS动画实例（圆的涟漪扩散）】图5圆的涟漪扩散
推荐阅读
- 标签、语法规范、内联框架、超链接、CSS的编写位置、CSS语法、开发工具、块和内联、常用选择器、后代元素选择器、伪类、伪元素。
- 2018-04-16动画练习作业
- LSTM网络层详解及其应用实例
- Python-类和对象
- 3.css浮动
- 好看的动画都有一只有趣的动物，CoCo也不例外
- SpringBoot整合MongoDB完整实例代码
- MySQL|MySQL 存储过程语法及实例
- vue|vue canvas 手绘进度条动画
- thinkphp3.2下实现阿里云视频点播实例（客户端JavaScript上传）