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所示的动画效果。
![CSS动画实例(圆的涟漪扩散)](https://img.it610.com/image/info8/693d4d2d95c043bab18256bb5027b105.gif)
文章图片
图1圆的放大(一)
若将上面文件中的“border: 4px solid #000; ”改写为“background: #000; ”,则呈现出如图2所示的动画效果。
![CSS动画实例(圆的涟漪扩散)](https://img.it610.com/image/info8/934d3b8137074ae589a3294dd4744a11.gif)
文章图片
图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所示的动画效果。
![CSS动画实例(圆的涟漪扩散)](https://img.it610.com/image/info8/6c4c90cc2f3140ec8cb7882fcfee406f.gif)
文章图片
图3两个圆的放大(一)
同样,若将上面文件中的“border: 10px solid #000; ”改写为“background: #000; ”,则呈现出如图4所示的动画效果。
![CSS动画实例(圆的涟漪扩散)](https://img.it610.com/image/info8/81e3f5a99dc04042b6a8136f03bf6392.gif)
文章图片
图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动画实例(圆的涟漪扩散)](https://img.it610.com/image/info8/4c37c4cf74494cb9b74d0998f60d6d0e.gif)
文章图片
【CSS动画实例(圆的涟漪扩散)】图5圆的涟漪扩散
推荐阅读
- 标签、语法规范、内联框架、超链接、CSS的编写位置、CSS语法、开发工具、块和内联、常用选择器、后代元素选择器、伪类、伪元素。
- 2018-04-16动画练习作业
- LSTM网络层详解及其应用实例
- Python-类和对象
- 3.css浮动
- 好看的动画都有一只有趣的动物,CoCo也不例外
- SpringBoot整合MongoDB完整实例代码
- MySQL|MySQL 存储过程语法及实例
- vue|vue canvas 手绘进度条动画
- thinkphp3.2下实现阿里云视频点播实例(客户端JavaScript上传)