css涟漪光圈扩散_CSS动画实例：圆的涟漪扩散

CSS

动画实例：圆的涟漪扩散

设页面中有

class="circle

">

，定义

.circle

的样式规则绘制一个半径为

75px

，

边框厚度为

4px

的圆，再定义关键帧，使得圆从不可见到可见，再到放大后又不可见。

编写的

HTML

文件如下。

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;

}

}

class="container">