CSS 、JS实现浪漫流星雨动画

jiezi

6 年前

1，效果图

2，源码
HTML
< body >
< div class =“container”>
< div id =“mask”> </ div >
< div id =“sky”> </ div >
< div id =“moon”> </ div >
< div id =“stars”> </ div >
< div class =“cloud cloud-1”></ div >
<div class =“cloud cloud-2”> </ div >
< div class =“cloud cloud-3”> </ div >
</ div >
</ body >
CSS
/* – – – – – – 重启 – – – – – – */

* {
保证金：0 ;
填充：0 ;
}

html，
body {
width：100% ;
最小宽度：1000px ;
身高：100% ;
最小高度：400px ;
溢出：隐藏;
}

/ * ———— 画布 ———— * /
.container {
position：relative;
身高：100% ;
}
/ * 遮罩层 * /

#mask {
position：absolute;
宽度：100% ;
身高：100% ;
background：rgba（0,0,0，.8）;
z-index：900 ;
}
/ * 天空背景 * /

#sky {
width：100% ;
身高：100% ;
background：线性渐变（rgba（0,150,255,1），rgba（0,150,255，.8），rgba（0,150,255，.5））;
}
/ * 月亮 * /

#moon {
position：absolute;
上：50px ;
右：200px ;
宽度：120px ;
身高：120px ;
背景：rgba（251,255,25,0.938）;
border-radius：50% ;
box-shadow：0 0 20px rgba（251,255,25,0.5）;
z-index：9999 ;
}
/ * 闪烁星星 * /

.blink {
position：absolute;
background：rgb（255,255,255）;
border-radius：50% ;
box-shadow：0 0 5px rgb（255,255,255）;
不透明度：0 ;
z-index：10000 ;
}
/ * 流星 * /

.star {
position：absolute;
不透明度：0 ;
z-index：10000 ;
}

.star :: after {
content：“”;
显示：块;
边界：坚固;
border-width：2px 0 2px 80px ;
/ * 流星随长度逐渐缩小 * /
border-color：透明透明透明 rgba（255,255,255,1）;
border-radius：2px 0 0 2px ;
transform：rotate（-45deg）;
transform-origin：0 0 0 ;
盒子阴影：0 0 20px rgba（255,255,255，.3）;
}
/ * 云 * /

.cloud {
position：absolute;
宽度：100% ;
身高：100px ;
}

.cloud-1 {
bottom：– 100px ;
z-index：1000 ;
不透明度：1 ;
变换：规模（1.5）;
-webkit-transform：scale（1.5）;
-moz-transform：scale（1.5）;
-ms-transform：scale（1.5）;
-o-transform：scale（1.5）;
}

.cloud-2 {
left：– 100px ;
底部：– 50px ;
z-index：999 ;
不透明度：。5 ;
变换：旋转（7deg）;
-webkit-transform：rotate（7deg）;
-moz-transform：rotate（7deg）;
-ms-transform：rotate（7deg）;
-o-transform：rotate（7deg）;
}

.cloud-3 {
left：120px ;
底部：– 50px ;
z-index：999 ;
不透明度：。1 ;
transform：rotate（-10deg）;
-webkit-transform：rotate（-10deg）;
-moz-transform：rotate（-10deg）;
-ms-transform：rotate（-10deg）;
-o-transform：rotate（-10deg）;
}

.circle {
position：absolute;
border-radius：50% ;
背景：#fff ;
}

.circle-1 {
width：100px ;
身高：100px ;
上：– 50px ;
左：10px ;
}

.circle-2 {
width：150px ;
身高：150px ;
上：– 50px ;
左：30px ;
}

.circle-3 {
width：300px ;
身高：300px ;
上：– 100px ;
左：80px ;
}

.circle-4 {
width：200px ;
身高：200px ;
上：– 60px ;
左：300px ;
}

.circle-5 {
width：80px ;
身高：80px ;
上：– 30px ;
左：450px ;
}

.circle-6 {
width：200px ;
身高：200px ;
上：– 50px ;
左：500px ;
}

.circle-7 {
width：100px ;
身高：100px ;
上：– 10px ;
左：650px ;
}

.circle-8 {
width：50px ;
身高：50px ;
上：30px ;
左：730px ;
}

.circle-9 {
width：100px ;
身高：100px ;
上：30px ;
左：750px ;
}

.circle-10 {
width：150px ;
身高：150px ;
上：10px ;
左：800px ;
}

.circle-11 {
width：150px ;
身高：150px ;
上：– 30px ;
左：850px ;
}

.circle-12 {
width：250px ;
身高：250px ;
上：– 50px ;
左：900px ;
}

.circle-13 {
width：200px ;
身高：200px ;
上：– 40px ;
左：1000px ;
}

.circle-14 {
width：300px ;
身高：300px ;
上：– 70px ;
左：1100px ;
}
JS
// 流星动画
setInterval（function（）{
const obj = addChild（“#sky”，“div”，2，“star”）;

for（let i = 0 ; i <obj.children.length; i ++）{
const top = -50 + Math .random（）* 200 +“px”，
left = 200 + Math .random（）* 1200 +“px”，
scale = 0.3 + Math .random（）* 0.5 ;
const timer = 1000 + Math .random（）* 1000 ;

obj.children [i] .style.top = top;
obj.children [i] .style.left = left;
obj.children [i] .style.transform = `scale（$ {scale}）` ;

requestAnimation（{
ele：obj.children [i]，
attr：[“top”，“left”，“opacity”]，
值：[150，-150，.8]，
time：timer，
flag：false，
fn：function（）{
requestAnimation（{
ELE：obj.children [I]，
ATTR：“顶”，“左”，“不透明”]，
值：[150，-150，0]，
时间：定时器，
标志：假，
FN：（）=> {
obj.parent.removeChild（obj.children [I]）;
}
}）
}
}）;
}

}，1000）;

// 闪烁星星动画
setInterval（function（）{
const obj = addChild（“#stars”，“div”，2，“blink”）;

for（let i = 0 ; i <obj.children.length; i ++）{
const top = -50 + Math .random（）* 500 +“px”，
left = 200 + Math .random（）* 1200 +“px”，
round = 1 + Math .random（）* 2 +“px”;
const timer = 1000 + Math .random（）* 4000 ;

obj.children [i] .style.top = top;
obj.children [i] .style.left = left;
obj.children [i] .style.width = round;
obj.children [i] .style.height = round;

requestAnimation（{
ele：obj.children [i]，
attr：“opacity”，
值：.5，
time：timer，
flag：false，
fn：function（）{
requestAnimation（{
ele：obj.children [i]，
attr：“opacity”，
value：0，
time：timer，
flag：false，
fn：function（）{
obj.parent.removeChild（obj.children [I]）;
}
}）;
}
}）;
}

}，1000）;

// 月亮移动
requestAnimation（{
ele：“#moon”，
attr：“right”，
值：1200，
时间：10000000，
}）;

// 添加云
const clouds = addChild（“。cloud”，“div”，14，“circle”，true）;
for（let i = 0 ; i <clouds.children.length; i ++）{
for（let j = 0 ; j <clouds.children [i] .length;）{
clouds.children [i] [j] .classList.add（`circle- $ {++ j} `）;
}
}
// 云动画

let flag = 1 ;
的 setInterval（
功能（）{
const clouds = document .querySelectorAll（“。cloud”）;
const left = Math .random（）* 5 ;
bottom = Math .random（）* 5 ;

标志 ++;
}，2000）

封装方法
// ——————————————- 动画 —- ———————————————–
// 运动动画，调用 Tween.js
// ele：dom | 班级 | id | 标签节点 | 类名 | id 名 | 标签名，只支持选择一个节点，类类名以及标签名只能选择页面中第一个
// attr：属性属性名
// 值：目标值目标值
// 时间：持续时间持续时间
// 补间：定时 function 函数方程
// flag：Boolean 判断是按值移动还是按位置移动，默认按位置移动
// fn：callback 回调函数
// 增加返回值：将内部参数对象返回，可以通过设置返回对象的属性 stop 为 true 打断动画
函数 requestAnimation（obj）{
// ————————————- 参数设置 ———————————————
// 默认属性
const 参数 = {
ele：null，
attr：null，
value：null，
time：1000，
tween：“linear”，
flag：true，
stop：false，
fn：“”
}

// 合并传入属性
Object .assign（parameter，obj）; // 覆盖重名属性

// ————————————- 动画设置 ——— ————————————
// 创建运动方程初始参数，方便复用
let start = 0 ; // 用于保存初始时间戳
let target =（typeof parameter.ele ===“string”？document .querySelector（parameter.ele）：parameter.ele），// 目标节点
attr = parameter.attr，// 目标属性
beginAttr = parseFloat（getComputedStyle（target）[attr]），// attr 起始值
value = parameter.value，// 运动目标值
count = value – beginAttr，// 实际运动值
time = parameter.time，// 运动持续时间，
tween = parameter.tween，// 运动函数
flag = parameter.flag，
callback = parameter.fn，// 回调函数
curVal = 0 ; // 运动当前值

// 判断传入函数是否为数组，多段运动
（function（）{
if（attr instanceof Array）{
beginAttr = [];
count = [];
对于（让我的 ATTR）{
常量 VAL = parseFloat（的 getComputedStyle（目标）[I]）;
beginAttr.push（VAL）;
count.push（value – val）;
}
}
if（value instanceof Array）{
for（let i in value）{
count [i] = value [i] – beginAttr [i];
}
}
}）（）;

// 运动函数
功能动画（时间戳）{
如果（parameter.stop）返回 ; // 打断
// 存储初始时间戳
if（！start）start = timestamp;
// 已运动时间
让 t = 时间戳 – 开始;
// 判断多段运动
if（beginAttr instanceof Array）{
// const len = beginAttr.length // 存数组长度，复用

// 多段运动第 1 类 – 多属性，同目标，同时间 / 不同时间
if（typeof count ===“number”）{// 同目标
// 同时间
if（typeof time ===“number”）{
if（t> time）t = time; // 判断是否超出目标值

// 循环 attr，分别赋值
为（let i in beginAttr）{
if（flag）curVal = Tween [tween]（t，beginAttr [i]，count，time）; // 调用 Tween，返回当前属性值，此时计算方法为移动到
写入位置 else curVal = Tween [tween]（t，beginAttr [i]，count + beginAttr [i]，time）; // 调用 Tween，返回当前属性值，此时计算方法为移动了
写入距离 if（attr [i] ===“opacity”）target.style [attr [i]] = curVal; // 给属性赋值
else target.style [attr [i]] = curVal +“px”; // 给属性赋值

if（t <time）requestAnimationFrame（animate）; // 判断是否运动完
其他回调 && callback（）; // 调用回调函数
}
回归 ;
}

// 不同时间
if（time instanceof Array）{
// 循环时间，attr，分别赋值
为（让我在 beginAttr 中）{
// 错误判断
if（！time [i] && time [i]！== 0）{
throw new Error（
“输入时间的长度不等于属性的长度”）;
}

// 判断是否已经完成动画，完成则跳过此次循环
if（parseFloat（getComputedStyle（target）[attr [i]]）===（typeof value ===“number”？value：value [i]））
继续 ;
// t = 时间戳 – 开始; // 每次循环初始化 t
if（t> time [i]）t = time [i]; // 判断是否超出目标值

if（flag || attr [i] ===“opacity”）curVal = Tween [tween]（t，beginAttr [i]，count，i）; // 调用 Tween，返回当前属性值，此时计算方法为移动到
写入位置 else curVal = Tween [tween]（t，beginAttr [i]，count + beginAttr [i]，i）; // 调用 Tween，返回当前属性值，此时计算方法为移动了
写入距离 if（attr [i] ===“opacity”）target.style [attr [i]] = curVal; // 给属性赋值
else target.style [attr [i]] = curVal +“px”; // 给属性赋值
}

if（t < Math .max（… time））requestAnimationFrame（animate）; // 判断函数是否运动完
其他回调 && callback（）; // 如果已经执行完时间最长的动画，则调查回调函数
return ;
}
}

// 多段运动第 2 类 – 多属性，不同目标，同时间 / 不同时间
if（count instanceof Array）{
// 同时间
if（typeof time ===“number”）{

if（t> time）t = time; // 判断是否超出目标值

for（let i in beginAttr）{// 循环 attr，count，分别赋值
// 错误判断
if（！count [i] && count [i]！== 0）{
throw new Error（
“输入值的长度不是等于属性的长度“）;
}

if（flag || attr [i] ===“opacity”）curVal = Tween [tween]（t，beginAttr [i]，count [i]，time）; // 调用 Tween，返回当前属性值，此时计算方法为移动到
写入位置 else curVal = Tween [tween]（t，beginAttr [i]，count [i] + beginAttr [i]，time）; // 调用 Tween，返回当前属性值，此时计算方法为移动了
写入距离 if（attr [i] ===“opacity”）target.style [attr [i]] = curVal; // 给属性赋值
else target.style [attr [i]] = curVal +“px”; // 给属性赋值
}

if（t <time）requestAnimationFrame（animate）; // 判断函数是否运动完
其他回调 && callback（）; // 如果已经执行完时间最长的动画，则调查回调函数
return ;
}

// 不同时间
if（time instanceof Array）{
for（let i in beginAttr）{
// 错误判断
if（！time [i] && time [i]！== 0）{
throw new Error（
“输入时间的长度）不等于属性的长度“）;
}

// 判断是否已经完成动画，完成则跳过此次循环
if（parseFloat（getComputedStyle（target）[attr [i]]）===（typeof value ===“number”？value：value [i]））
继续 ;

if（t> time [i]）t = time [i]; // 判断是否超出目标值

// 错误判断
if（！count [i] && count [i]！== 0）{
throw new Error（
“输入值的长度不等于属性的长度”）;
}

if（flag || attr [i] ===“opacity”）curVal = Tween [tween]（t，beginAttr [i]，count [i]，time [i]）; // 调用 Tween，返回当前属性值，此时计算方法为移动到
写入位置其他 curVal = Tween [tween]（t，beginAttr [i]，count [i] + beginAttr [i]，time [i]）; // 调用 Tween，返回当前属性值，此时计算方法为移动了
写入距离 if（attr [i] ===“opacity”）target.style [attr [i]] = curVal;
否则 target.style [attr [i]] = curVal +“px”;
}

if（t < Math .max（… time））requestAnimationFrame（animate）;
else callback && callback（）;
回归 ;
}
}

}

// 单运动模式
if（t> time）t = time;
if（flag || attr ===“opacity”）curVal = Tween [tween]（t，beginAttr，count，time）; // 调用 Tween，返回当前属性值，此时计算方法为移动到
写入位置 else curVal = Tween [tween]（t，beginAttr [i]，count + beginAttr，time）; // 调用 Tween，返回当前属性值，此时计算方法为移动了
写入距离 if（attr ===“opacity”）target.style [attr] = curVal;
否则 target.style [attr] = curVal +“px”;

if（t <time）requestAnimationFrame（animate）;
else callback && callback（）;

}

requestAnimationFrame（动画）;
返回参数; // 返回对象，供打断或其他用途
}
//Tween.js
/ *
* t：时间已过时间
* b：开始起始值
* c：计算总的运动值
* d：持续时间持续时间
*
* 曲线方程
*
* http://www.cnblogs.com/bluedream2009/archive/2010/06/19/1760909.html
* * /

让 Tween = {
linear：function（t，b，c，d）{// 匀速
返回 c * t / d + b;
}，
easeIn：function（t，b，c，d）{// 加速曲线
return c *（t / = d）* t + b;
}，
easeOut：function（t，b，c，d）{// 减速曲线
return -c *（t / = d）*（t – 2）+ b;
}，
easeBoth：function（t，b，c，d）{// 加速减速曲线
if（（t / = d / 2）< 1）{
return c / 2 * t * t + b;
}
return -c / 2 *（（– t）*（t – 2）– 1）+ b;
}，
easeInStrong：function（t，b，c，d）{// 加加速曲线
return c *（t / = d）* t * t * t + b;
}，
easeOutStrong：function（t，b，c，d）{// 减减曲线
返回 -c *（（t = t / d – 1）* t * t * t – 1）+ b;
}，
easeBothStrong：function（t，b，c，d）{// 加速减减速线
如果（（t / = d / 2）< 1）{
return c / 2 * t * t * t * t + b;
}
return -c / 2 *（（t – = 2）* t * t * t – 2）+ b;
}，
elasticIn：function（t，b，c，d，a，p）{// 正弦衰减曲线（弹动渐入）
if（t === 0）{
return b;
}
if（（t / = d）== 1）{
return b + c;
}
if（！p）{
p = d * 0.3 ;
}
if（！a || a < Math .abs（c））{
a = c;
var s = p / 4 ;
} else {
var s = p /（2 * Math .PI）* Math .asin（c / a）;
}
返回 –（A * 数学 .pow（2，10 *（T – = 1））* 数学 .sin（（T * d – S）*（2 * 数学 .PI）/ P））+ B;
}，
elasticOut：function（t，b，c，d，a，p）{// 正弦增强曲线（弹动渐出）
if（t === 0）{
return b;
}
if（（t / = d）== 1）{
return b + c;
}
if（！p）{
p = d * 0.3 ;
}
if（！a || a < Math .abs（c））{
a = c;
var s = p / 4 ;
} else {
var s = p /（2 * Math .PI）* Math .asin（c / a）;
}
返回 a * Math .pow（2，-10 * t）* Math .sin（（t * d – s）*（2 * Math .PI）/ p）+ c + b;
}，
elasticBoth：function（t，b，c，d，a，p）{
if（t === 0）{
return b;
}
if（（t / = d / 2）== 2）{
return b + c;
}
if（！p）{
p = d *（0.3 * 1.5）;
}
if（！a || a < Math .abs（c））{
a = c;
var s = p / 4 ;
} else {
var s = p /（2 * Math .PI）* Math .asin（c / a）;
}
如果（T < 1）{
返回 -0.5 *（A * 数学 .pow（2，10 *（T – = 1））*
数学 .sin（（T * d – S）*（2 * 数学 .PI）/ p））+ b;
}
返回 a * Math .pow（2，-10 *（t – = 1））*
Math .sin（（t * d – s）*（2 * Math .PI）/ p）* 0.5 + c + b;
}，
backIn：function（t，b，c，d，s）{// 回退加速（回退渐入）
if（typeof s == ‘undefined’）{
s = 1.70158 ;
}
return c *（t / = d）* t *（（s + 1）* t – s）+ b;
}，
backOut：function（t，b，c，d，s）{
if（typeof s == ‘undefined’）{
s = 3.70158 ; // 回缩的距离
}
return c *（（t = t / d – 1）* t *（（s + 1）* t + s）+ 1）+ b;
}，
backBoth：function（t，b，c，d，s）{
if（typeof s == ‘undefined’）{
s = 1.70158 ;
}
if（（t / = d / 2）< 1）{
return c / 2 *（t * t *（（（s * =（1.525））+ 1）* t – s））+ b;
}
return c / 2 *（（t – = 2）* t *（（（s * =（1.525））+ 1）* t + s）+ 2）+ b;
}，
bounceIn：function（t，b，c，d）{// 弹球渐出）
返回 c – Tween [‘bounceOut’]（d – t，0，c，d）+ b;
}，
bounceOut：function（t，b，c，d）{
if（（t / = d）<（1 / 2.75））{
return c *（7.5625 * t * t）+ b;
} else if（t <（2 / 2.75））{
return c *（7.5625 *（t – =（1.5 / 2.75））* t + 0.75）+ b;
} else if（t <（2.5 / 2.75））{
return c *（7.5625 *（t – =（2.25 / 2.75））* t + 0.9375）+ b;
}
return c *（7.5625 *（t – =（2.625 / 2.75））* t + 0.984375）+ b;
}，
bounceBoth：函数（T，B，C，d）{
如果（T <d / 2）{
返回吐温 [‘bounceIn’]（T * 2，0，C，d）* 0.5 + B;
}
return Tween [‘bounceOut’]（t * 2 – d，0，c，d）* 0.5 + c * 0.5 + b;
}
}

// ——————————————- DOM 操作 — ————————————————
// 添加节点
// ele：父节点，支持输入变量，id 值，类值，标签值。除变量外，其余值必须为字符串
// 节点：添加的标签名，值为字符串
// n：节点添加个数
// className：节点绑定的类名，值为字符串，多个类名用空格隔开
// 布尔：是否选中所有目标父节点。可选参数，不输入则判定为 false，则只匹配选中的第一个节点
函数 addChild（ele，node，n，className，boolean）{
// 获取节点
let parent = null ;

if（typeof ele！==“string”）parent = ele;
else if（ele [0] ===“#”）parent = document .getElementById（ele.slice（1））;
else if（ele [0] ===“。”）{
if（boolean === false）parent = document .getElementsByClassName（ele.slice（1））[0];
else parent = document .getElementsByClassName（ele.slice（1））;
} else {
if（boolean === false）parent = docuemnt.getElementsByTagName（ele）[0];
else parent = document .getElementsByTagNameNS（ele）;
}

// 声明用于存储父节点及子节点的对象
const obj = {
“parent”：parent，
“children”：[]
};

// 添加节点
if（boolean）{
for（let i = 0 ; i <parent.length; i ++）{
// 创建容器碎片
const fragment = document .createDocumentFragment（）;
// 保存子节点，用于返回值
obj.children [i] = [];

for（let j = 0 ; j <n; j ++）{
const target = document .createElement（node）;
target.className = className;
fragment.appendChild（目标）;
// 添加子节点到数组，用于返回值
obj.children [i] [j] = 目标;
}

父 [I] .appendChild（片段）
}
} else {
// 创建碎片容器
const fragment = document .createDocumentFragment（）;

for（let i = 0 ; i <n; i ++）{
const target = document .createElement（node）;
target.className = className;
fragment.appendChild（目标）;
// 添加子节点，用于返回值
obj.children [i] = 目标;
}
// 将碎片容器一次性添加到父节点
parent.appendChild（片段）;
}

// 返回参数，供动画函数调用
return obj;
}

3，案例解析
HTML
由于节点很多，并且我想尽量做得逼真有趣有点，还给节点加了随机位置。所以节点的输出都是用 JS 控制的，HTML 这边只写了几个父元素盒子，加上相应的 ID 名和类类名，结构相对简单。
CSS
CSS 部分的难点就是流星的样式和用圈圈画云层，然后将云层堆叠出立体效果。
首先说一下流星的样式：
#sky .star {
position：absolute;
不透明度：0 ;
z-index：10000 ;
}

先提取了公共样式，添加定位属性;
然后在星后通过后伪类添加流星，用边界特性画：
1）模型绘制：border-width 的顺序为四边 top，right，bottom，left，同理 border-color 的顺序也为四边 top，right，bottom，left。这样将 border-width 与 border-color 一一对应后，就能看出 2px 的是流星的宽度，80px 是流星的长度，而 0 像素流星就是尾巴的这样就形成了一个。头部 2px 的宽，尾部 0 像素，长度 80px 的流星模型 ;
2）稍微逼真：通过边界半径？给流星的头部增加个圆角，让它看起来更逼真最后通过 roteta 旋转一个角度，让它看起来像是往下掉;
3）增加闪光：通过箱阴影给流星增加一点光晕，让它看起来有闪光的效果;
通过以上 3 步，一个流星就画好了。
然后是画云：
因为云的代码比较长，这里就不贴出来了方法无非是通过一个一个的圆，相互叠加覆盖，完成一个云朵的形状。完成一个云层之后，copy 一个，然后多个云层通过 rotate，opacity，left 定位等，做出一个渐隐叠加的立体效果;
JS
JS 部分以流星举例说明
setInterval（function（）{
const obj = addChild（“#sky”，“div”，2，“star”）; // 插入流星

for（let i = 0 ; i <obj.children.length; i ++）{
// 随机位置
const top = -50 + Math .random（）* 200 +“px”，
left = 200 + Math .random（）* 1200 +“px”，
scale = 0.3 + Math .random（）* 0.5 ;
const timer = 1000 + Math .random（）* 1000 ;

obj.children [i] .style.top = top;
obj.children [i] .style.left = left;
obj.children [i] .style.transform = `scale（$ {scale}）` ;

// 添加动画
requestAnimation（{
ele：obj.children [i]，
attr：[“top”，“left”，“opacity”]，
值：[150，-150，.8]，
time：timer，
flag：false，
fn：function（）{
requestAnimation（{
ELE：obj.children [I]，
ATTR：“顶”，“左”，“不透明”]，
值：[150，-150，0]，
时间：定时器，
标志：假，
FN：（）=> {
obj.parent.removeChild（obj.children [I]）; // 动画结束删除节点
}
}）
}
}）;
}

}，1000）;
这里边用到了我自己封装的两个方法，一个是基于 requestAnimationFrame 的 requestAnimation，以及基于 appendChild 的 addChild。
为了达成星星位置随机的效果，通过定时器的 setInterval 的不停插入与删除流星：
首先，每次添加 2 个流星到页面，但是定时器的间隔时间小于流星的动画时间，这样就能保证页面中的流星的数量不是一个固定值，但肯定是大于 2 的。不然一次 2 个流星略显冷清;
然后，通过对循环（也可以用为式，换的，都行。对于 - 的最简单）给每个新添加到页面中的流星一个随机的位置（顶部，左侧），随机的大小（规模），随机的动画执行时间（定时器）;
最后，在用于循环中，给每个新添加到页面中的流星加上动画，并通过回调函数在执行完动画后删除节点。这里要注意的是，要动画分成两个阶段（出现与消失，主要是 opacity 控制）。另外我这里的处理，每个流星都移动相同的距离 300px，这个距离我觉得也可以通过随机数控制，但我犯了个懒，就没有做。
4，小问题
目前我发现的问题有 2 个：
一是 DOM 操作本身的问题页面不停的添加与删除节点，造成不停地。回流与重绘，很耗性能;
二是 requestAnimationFrame 本身的问题因为定时器不断在添加节点，而 requestAnimationFrame 的特性 - 当离开当前页面去浏览其他页面时，动画会暂停。这就造成了一个问题，节点一直在加，但动画全在停那没有执行那么下次再回到这个页面的时候，就吊杆!!! 动画就炸了，你会看到画面一卡，很多小蝌蚪集体出动去找妈妈。
5，结语
这个小案例虽然从难度上来看很简单，但是它可拓展性很高 – 比如表个白啊，寄个相思，耍个浪漫啊等等，用纯 CSS 也可以实现。