很多營銷頁面中需要實現類似流星雨的動畫背景，營造節日浪漫的氣氛。

要實現這樣的效果，有兩種方法，一個是使用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);//光暈部分
}
 

接著我們來實現一個尾部軌跡，我們可以使用另外的元素，但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%;

這樣流星元素就做好了。接下來我們給這個流星新增動畫，在重力掉落過程（遇空氣阻力有減速）中淡入淡出。

星光動畫

@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);
    }
}
 

你可以自己線上試試。（該線上例項還包含一個月亮背景）