一、效果图：先用一个元素的:before和:after绘制两个粒子。这样做的好处是一个元素可以有两个粒子，节省dom。粒子绝对位于中心。i{&:before,&:after{位置：绝对；顶部：50%；左：50%；背景：径向渐变（#fff,#fff10%,rgba(255,255,255,0)56%）;边界半径：50%；内容：””;不透明度：0；}编写另一个for循环以生成30个元素，并为粒子设置随机大小：@for$ifrom1through30{.particle{i:nth-child(#{$i}){&:before{$w:#{随机(5)+10}像素；宽度：$w；身高：$w；}&:after{$w:#{random(6)+3}px;宽度：$w；身高：$w；}}}}接下来，我们需要为每个从各个方向进入圆心的粒子生成随机动画。为了让x轴和y轴的方向要么正要么负，我们用一个随机函数生成1和-1：random(2)*2-3，然后让粒子从随机不同的位置向中心移动职位。@keyframesp#{$i}{0%{transform:translate3d(#{(random(800))*(random(2)*2-3)}px,#{(random(800))*(random(2)*2-3)}px,0);不透明度：0；}10%{不透明度：1；}100%{transform:translate3d(0,0,0)scale(0.6);不透明度：0；}}预览地址：https://codepen.io/jianxiujiu...
