纯css实现粒子效果

前端开发whqet,csdn,王海庆,whqet,前端开发专家

好久没有更新的CSS3演武场系列，半年前搁浅的一篇文章赋予新年新气象闪亮登场了，研究一下利用css（sass）实现粒子效果，主要使用box-shadow生成粒子，利用css3 animation和translateZ实现动画。

------------------------------------------------------------

--我参加了博客之星评选，如果你喜欢我的博客，求投票，您的支持是我的动力之源，走起！

-----------------------------------------------------------------------------------------

看效果先

思路解析

1.box-shadow生成粒子，赋予随机位置、随机颜色，利用sass的for循环和random()实现。

2.animation实现动画。

3.transform 3d实现深度动画，主要使用translateZ。

实现

下面我们分别来实现一下，源码我放在了codepen，请大家移步。

----------------

-----------------------------