CSS3做一个气泡的动画效果
来学习分享一下用CSS3做一个简单的气泡飘飘的动画效果
1、首先来搭建一个基本HTML结构
先来个10个div，这也就是我们的泡泡了。
2、接下来进入css样式设置
设置一下body，并给他一个合适的背景颜色，撑满整个屏幕，然后再来设置一下泡泡的样式了。
给泡泡个固定定位，方便跑来跑去，预备一个泡泡动画
3、再来就是写个泡泡飘飘的动画了
我们用固定定位来控制垂直方向的移动，水平方向用transform的translate来控制，大概写三个关键帧，想要复杂写也可多写些。
现在泡泡已经能动起来了，但是所有的泡泡都在一起的，还要让他们分开动起来。
4、最后就是美化动画了
这里对每个泡泡设置不同大小，出现的位置，再加些不同的延迟，动画时间，让泡泡在不同位置出现，快慢不同。
这简单的泡泡动画就完成了。
你还想要更多泡泡的话，还可以继续加。
总结：
要对动画的各个属性功能熟悉并灵活运用，在先想好动画大概的雏形，用什么属性来实现，写好关键帧，最后来美化动画细节，比如这个还可以改泡泡的轨迹，颜色，多彩泡泡什么的，这就看你的需求了。
————纵然是在巨人的肩膀上学习……