个视频用CSS写一个非常简单的动态背景。大家可以看到在屏幕底部不断的有彩色的小泡泡升起来，而且是逐渐变大的，直到离开屏幕。来看一下代码，html非常简单。

·这些小泡泡用span来写，现在写了一些基本的样式，其它样式重新来写。来写一下这些小泡泡的样式，三个小圆出来了，再给这些小球加几层阴影，让它们看起来有点像气泡。

·接着来写个动画，让这些气泡从底部升起来。一开始把这些气泡移出屏幕的底部，这里给它100vh，并且一开始是比较小的，就让它变成0，再慢慢放大。动画结束的时候，气泡从顶部移出视口的范围，并且逐渐放大到原来的大小。绑定下动画，动画效果有了。

·现在单独对偶数这一个设置样式，让它的色彩看起来丰富一点。阴影复制一下(1)，同样用这个颜色。现在可以看到中间第二个颜色已经改变了，然后要多生成一些小球。而且因为这个demon只考虑用css和h t ml来写，什么js、less、sass这些都不用。

·所以这些小球这里用一个最愚蠢的方法就是多写一些span。这里写了很多个span，也就是这些小球，这些气泡，每一个都给它定义了一个变量i。这里有什么用？等一下再来说。当然正常的不会这样子来写。像这些span和变量i都可以用js来生成，这个大家可以自己试着来改。

·这堆气泡生成了，但是这里希望每个小球的运动看起来随机一点，不要同时放大同时消失。这里要怎么样实现这种随机性？其实也非常简单。不要给所有气泡设置统一的动画时间，这里可以用calc()计算函数，用120去除以刚才定义的这个变量。因为每个视频里面设置i的值是不一样的。所以每个气泡完成动画的时间也是不一样的，这个参数大家可以自己来调整。

来看一下最终的效果，没有问题，这些气泡现在看起来每一个都是随机出现，随机放大和消失的。

这个视频就到这里，感谢大家的收看。