好久没有写 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>