好久没有写 css 动画了，久到我都忘了了，想当初在大学的时候，写起 css3 的动画，那可是6得很。
今天要实现个水波纹动画，暂且记录一下思路吧
刚开始拿到的时候还是有点傻眼，第一种方案，我的想法是，用一个 div 就够了，然后可以用 css3 radial-gradient 的径向渐变，但是我们的产品需求是根据数据大小，分三种情况，展示一个圈，两个圈，三个圈这样，那就感觉不能用一个 div 搞定了。因为在 react 项目中直接分为三个 div 会好一点，我会通过数据控制 div 的个数。
ps: 在之后我会补上只用一个 div 然后用径向渐变的写法。
现在先：
然后为每个圈加样式和动画,这里要注意，三个圈的动画时间要一致，这样看起来才是波纹扩散的感觉
#grad2{
display: flex;
justify-content: center;
align-items: center;
width: 100px;
height: 100px;
background: #20308B;
}
.inner{
width: 8px;
height: 8px;
border-radius: 5px;
background-color: #00D3E9;
animation: moveInner 1s infinite;
}
.middle{
display: flex;
justify-content: center;
align-items: center;
width: 24px;
height: 24px;
border-radius: 12px;
background-color: rgba(0, 211, 233, 0.2);
animation: moveMiddle 1s infinite;
}
.biggest{
display: flex;
justify-content: center;
align-items: center;
width: 40px;
height: 40px;
border-radius: 20px;
background-color: rgba(0, 211, 233, 0.1);
animation: moveBiggest 1s infinite;
}
@keyframes moveInner{
from {
width: 4px;
height: 4px;
}
to {
width: 8px
height: 8px;
}
}
@keyframes moveMiddle{
from {
width: 8px;
height: 8px;
}
to {
width: 24px
height: 24px;
}
}
@keyframes moveBiggest {
from {
width: 8px;
height: 8px;
}
to {
width: 40px
height: 40px;
}
}
最后合成的代码：
```html
!DOCTYPE html>
