CSS3做一个气泡的动画效果

时间:2024-03-26 10:13:35

来学习分享一下用CSS3做一个简单的气泡飘飘的动画效果

1、首先来搭建一个基本HTML结构
CSS3做一个气泡的动画效果
先来个10个div,这也就是我们的泡泡了。

2、接下来进入css样式设置
CSS3做一个气泡的动画效果
设置一下body,并给他一个合适的背景颜色,撑满整个屏幕,然后再来设置一下泡泡的样式了。
CSS3做一个气泡的动画效果
给泡泡个固定定位,方便跑来跑去,预备一个泡泡动画

3、再来就是写个泡泡飘飘的动画了
CSS3做一个气泡的动画效果
我们用固定定位来控制垂直方向的移动,水平方向用transform的translate来控制,大概写三个关键帧,想要复杂写也可多写些。

CSS3做一个气泡的动画效果
现在泡泡已经能动起来了,但是所有的泡泡都在一起的,还要让他们分开动起来。

4、最后就是美化动画了
CSS3做一个气泡的动画效果
这里对每个泡泡设置不同大小,出现的位置,再加些不同的延迟,动画时间,让泡泡在不同位置出现,快慢不同。
这简单的泡泡动画就完成了。
CSS3做一个气泡的动画效果
你还想要更多泡泡的话,还可以继续加。

总结:

要对动画的各个属性功能熟悉并灵活运用,在先想好动画大概的雏形,用什么属性来实现,写好关键帧,最后来美化动画细节,比如这个还可以改泡泡的轨迹,颜色,多彩泡泡什么的,这就看你的需求了。

————纵然是在巨人的肩膀上学习……