CSS动画实例：圆的涟漪扩散
设页面中有<div class="circle "></div>，定义.circle的样式规则绘制一个半径为75px，边框厚度为4px的圆，再定义关键帧，使得圆从不可见到可见，再到放大后又不可见。
编写的HTML文件如下。
<!DOCTYPE html>
<html>
<head>
<title>圆的放大</title>
<style>
.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; }
}
</style>
</head>
<body>
<div class="container">
<div class="circle"></div>
</div>
</body>
</html>
在浏览器中打开包含这段HTML代码的html文件，可以呈现出如图1所示的动画效果。
图1 圆的放大（一）
若将上面文件中的“border: 4px solid #000;”改写为“background: #000;”，则呈现出如图2所示的动画效果。
图2 圆的放大（二）
在图1的基础上再增加一个圆，并且新增加的圆延迟0.5s执行动画过程。编写如下的HTML文件。
<!DOCTYPE html>
<html>
<head>
<title>圆的放大</title>
<style>
.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; }
}
</style>
</head>
<body>
<div class="container">
<div class="circle"></div>
</div>
</body>
</html>
在浏览器中打开包含这段HTML代码的html文件，可以呈现出如图3所示的动画效果。
图3 两个圆的放大（一）
同样，若将上面文件中的“border: 10px solid #000;”改写为“background: #000;”，则呈现出如图4所示的动画效果。
图4 两个圆的放大（二）
增加到4个圆，其中一个圆保持不变，另外三个圆按给定延迟执行放大动画过程，形成圆的涟漪扩散效果。编写的HTML文件内容如下。
<!DOCTYPE html>
<html>
<head>
<title>圆的涟漪扩散</title>
<style>
.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); }
}
</style>
</head>
<body>
<div class="container">
<div class='circle'></div>
<div class='circle'></div>
<div class='circle'></div>
<div class='circle'></div>
</div>
</body>
</html>
在浏览器中打开包含这段HTML代码的html文件，可以呈现出如图5所示的动画效果。
图5 圆的涟漪扩散
