这篇博客分享了如何利用CSS3制作一个简单的气泡飘动动画。首先通过HTML建立气泡的基本结构，然后设置CSS样式，包括背景颜色、气泡定位和动画预备。接着，通过关键帧创建气泡上升的动画效果，并调整各气泡的位置和大小以增加多样性。最后，对动画进行美化，如添加不同的延迟和动画时间，使气泡在屏幕上随机出现。总结强调了理解动画属性和灵活应用的重要性。
来学习分享一下用CSS3做一个简单的气泡飘飘的动画效果
1、首先来搭建一个基本HTML结构
先来个10个div，这也就是我们的泡泡了。
2、接下来进入css样式设置
设置一下body，并给他一个合适的背景颜色，撑满整个屏幕，然后再来设置一下泡泡的样式了。
给泡泡个固定定位，方便跑来跑去，预备一个泡泡动画
3、再来就是写个泡泡飘飘的动画了
我们用固定定位来控制垂直方向的移动，水平方向用transform的translate来控制，大概写三个关键帧，想要复杂写也可多写些。
现在泡泡已经能动起来了，但是所有的泡泡都在一起的，还要让他们分开动起来。
4、最后就是美化动画了
这里对每个泡泡设置不同大小，出现的位置，再加些不同的延迟，动画时间，让泡泡在不同位置出现，快慢不同。
这简单的泡泡动画就完成了。
你还想要更多泡泡的话，还可以继续加。
总结：
要对动画的各个属性功能熟悉并灵活运用，在先想好动画大概的雏形，用什么属性来实现，写好关键帧，最后来美化动画细节，比如这个还可以改泡泡的轨迹，颜色，多彩泡泡什么的，这就看你的需求了。
————纵然是在巨人的肩膀上学习……
扫一扫
1851
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
