個視頻用CSS寫一個非常簡單的動態背景。大家可以看到在屏幕底部不斷的有彩色的小泡泡升起來，而且是逐漸變大的，直到離開屏幕。來看一下代碼，html非常簡單。

·這些小泡泡用span來寫，現在寫了一些基本的樣式，其它樣式重新來寫。來寫一下這些小泡泡的樣式，三個小圓出來了，再給這些小球加幾層陰影，讓它們看起來有點像氣泡。

·接著來寫個動畫，讓這些氣泡從底部升起來。一開始把這些氣泡移出屏幕的底部，這里給它100vh，并且一開始是比較小的，就讓它變成0，再慢慢放大。動畫結束的時候，氣泡從頂部移出視口的范圍，并且逐漸放大到原來的大小。綁定下動畫，動畫效果有了。

·現在單獨對偶數這一個設置樣式，讓它的色彩看起來豐富一點。陰影復制一下(1)，同樣用這個顏色。現在可以看到中間第二個顏色已經改變了，然后要多生成一些小球。而且因為這個demon只考慮用css和h t ml來寫，什么js、less、sass這些都不用。

·所以這些小球這里用一個最愚蠢的方法就是多寫一些span。這里寫了很多個span，也就是這些小球，這些氣泡，每一個都給它定義了一個變量i。這里有什么用？等一下再來說。當然正常的不會這樣子來寫。像這些span和變量i都可以用js來生成，這個大家可以自己試著來改。

·這堆氣泡生成了，但是這里希望每個小球的運動看起來隨機一點，不要同時放大同時消失。這里要怎么樣實現這種隨機性？其實也非常簡單。不要給所有氣泡設置統一的動畫時間，這里可以用calc()計算函數，用120去除以剛才定義的這個變量。因為每個視頻里面設置i的值是不一樣的。所以每個氣泡完成動畫的時間也是不一樣的，這個參數大家可以自己來調整。

來看一下最終的效果，沒有問題，這些氣泡現在看起來每一個都是隨機出現，隨機放大和消失的。

這個視頻就到這里，感謝大家的收看。