css 波纹扩散_css水波纹动画

这篇博客介绍了如何利用CSS3实现一个水波纹扩散的动画效果。作者首先提出了用径向渐变实现的初步思路,但由于需求要求根据数据展示不同数量的圆圈,所以选择了使用多个div来实现。在React项目中,通过数据控制显示的div数量,确保动画同步,以达到波纹扩散的效果。博客详细展示了不同尺寸圆圈的CSS样式和对应的动画关键帧,实现了从小到大逐渐扩散的视觉效果。
摘要由CSDN通过智能技术生成

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

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值