很多营销页面中需要实现类似流星雨的动画背景，营造节日浪漫的气氛。
要实现这样的效果，有两种方法，一个是使用Canvas，一个是使用纯CSS3，
我们这里介绍第2种方法，在粒子数量少的时候，实现起来要更为简单，且便于调试。
先预览下整体效果：
流星雨的构成
流星雨=流星+雨。流星本身包含2个部分，一个是带光晕的星星，一个是尾部的运动轨迹。
而雨实际上就是一个重力掉落的动画。
首先我们实现一个星星的形状：
.star {display: block;width: 4px;height: 4px;border-radius: 50%;//小圆点background: #FFF;top: 100px;left: 400px;position: relative;box-shadow: 0 0 5px 5px rgba(255, 255, 255, .3);//光晕部分}
上面的代码实际上是一个带灰白阴影的白色小圆点。通过改变background属性可以得到不同颜色的星星。
接着我们来实现一个尾部轨迹，我们可以使用另外的元素，但CSS的伪元素刚好可以用来做这件事情。
.star:after {content: '';display: block;top: 0px;left: 4px;border: 0px solid #fff;border-width: 2px 90px 2px 90px;border-color: transparent transparent transparent rgba(255, 255, 255, .3);}
上述代码前面定义了扁扁的长方形，最后一行把该长方形变为以左边为底的侧翻过来的三角形，如下图所示：
接着我们需要把这个尾巴旋转一个角度，以呈现倾斜的效果：
transform: rotate(-45deg) translate3d(1px, 3px, 0);transform-origin: 0% 0%;
除了rotate旋转外，我们加了一点点平移，主要是为了校对星星的中心点，现在看起来像这样：
这样流星元素就做好了。接下来我们给这个流星添加动画，在重力掉落过程（遇空气阻力有减速）中淡入淡出。
星光动画
@keyframes star-ani {0% {opacity: 0;transform: scale(0) rotate(0) translate3d(0, 0, 0);}50% {opacity: 1;transform: scale(1) rotate(0) translate3d(-200px, 200px, 0);}100% {opacity: 0;transform: scale(1) rotate(0) translate3d(-300px, 300px, 0);}}
注意踏得网的在线编辑器已默认加载了prefixfree控件，所以以上代码均没有添加浏览器前缀。
你可以自己在线试试。（该在线实例还包含一个月亮背景）
by iefreer
