设页面中有

编写的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所示的动画效果。

图5  圆的涟漪扩散