引言
平常會做一些有意思的小案例練手，通常都會發到codepen上，但是codepen不能寫分析。
所以就在博客上開個案例分享系列，對demo做個剖析。目的以分享為主，然后也希望各路大神能給出改進的想法，在review中提升技術，發現樂趣~
1、效果圖
完整效果，請移步 codepen-流星雨案例
純CSS案例及本篇案例完整源碼，請移步The night of the metero
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
/* ------------reset------------ */
* {
margin: 0;
padding: 0;
}
html,
body {
width: 100%;
min-width: 1000px;
height: 100%;
min-height: 400px;
overflow: hidden;
}
/* ------------畫布 ------------ */
.container {
position: relative;
height: 100%;
}
/* 遮罩層 */
#mask {
position: absolute;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, .8);
z-index: 900;
}
/* 天空背景 */
#sky {
width: 100%;
height: 100%;
background: linear-gradient(rgba(0, 150, 255, 1), rgba(0, 150, 255, .8), rgba(0, 150, 255, .5));
}
/* 月亮 */
#moon {
position: absolute;
top: 50px;
right: 200px;
width: 120px;
height: 120px;
background: 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);
opacity: 0;
z-index: 10000;
}
/* 流星 */
.star {
position: absolute;
opacity: 0;
z-index: 10000;
}
.star::after {
content: "";
display: block;
border: solid;
border-width: 2px 0 2px 80px;
/*流星隨長度逐漸縮小*/
border-color: transparent transparent transparent rgba(255, 255, 255, 1);
border-radius: 2px 0 0 2px;
transform: rotate(-45deg);
transform-origin: 0 0 0;
box-shadow: 0 0 20px rgba(255, 255, 255, .3);
}
/* 雲 */
.cloud {
position: absolute;
width: 100%;
height: 100px;
}
.cloud-1 {
bottom: -100px;
z-index: 1000;
opacity: 1;
transform: scale(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;
bottom: -50px;
z-index: 999;
opacity: .5;
transform: rotate(7deg);
-webkit-transform: rotate(7deg);
-moz-transform: rotate(7deg);
-ms-transform: rotate(7deg);
-o-transform: rotate(7deg);
}
.cloud-3 {
left: 120px;
bottom: -50px;
z-index: 999;
opacity: .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%;
background: #fff;
}
.circle-1 {
width: 100px;
height: 100px;
top: -50px;
left: 10px;
}
.circle-2 {
width: 150px;
height: 150px;
top: -50px;
left: 30px;
}
.circle-3 {
width: 300px;
height: 300px;
top: -100px;
left: 80px;
}
.circle-4 {
width: 200px;
height: 200px;
top: -60px;
left: 300px;
}
.circle-5 {
width: 80px;
height: 80px;
top: -30px;
left: 450px;
}
.circle-6 {
width: 200px;
height: 200px;
top: -50px;
left: 500px;
}
.circle-7 {
width: 100px;
height: 100px;
top: -10px;
left: 650px;
}
.circle-8 {
width: 50px;
height: 50px;
top: 30px;
left: 730px;
}
.circle-9 {
width: 100px;
height: 100px;
top: 30px;
left: 750px;
}
.circle-10 {
width: 150px;
height: 150px;
top: 10px;
left: 800px;
}
.circle-11 {
width: 150px;
height: 150px;
top: -30px;
left: 850px;
}
.circle-12 {
width: 250px;
height: 250px;
top: -50px;
left: 900px;
}
.circle-13 {
width: 200px;
height: 200px;
top: -40px;
left: 1000px;
}
.circle-14 {
width: 300px;
height: 300px;
top: -70px;
left: 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"],
value: [150, -150, .8],
time: timer,
flag: false,
fn: function() {
requestAnimation({
ele: obj.children[i],
attr: ["top", "left", "opacity"],
value: [150, -150, 0],
time: timer,
flag: false,
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",
value: .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",
value: 1200,
time: 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(
function() {
const clouds = document.querySelectorAll(".cloud");
const left = Math.random() * 5;
bottom = Math.random() * 5;
let timer = 0;
for (let i = 0; i < clouds.length; i++) {
requestAnimation({
ele: clouds[i],
attr: ["left", "bottom"],
value: flag % 2 ? [-left, -bottom] : [left, bottom],
time: timer += 500,
flag: false,
fn: function() {
requestAnimation({
ele: clouds[i],
attr: ["left", "bottom"],
value: flag % 2 ? [left, bottom] : [-left, -bottom],
time: timer,
flag: false
})
}
});
}
flag++;
}, 2000)
- 封裝方法
//———————————————————————————————————————————動畫———————————————————————————————————————————————————
//運動動畫，調用Tween.js
//ele: dom | class | id | tag 節點 | 類名 | id名 | 標簽名，只支持選擇一個節點，class類名以及標簽名只能選擇頁面中第一個
//attr: attribute 屬性名
//value: target value 目標值
//time: duration 持續時間
//tween: timing function 函數方程
//flag: Boolean 判斷是按值移動還是按位置移動,默認按位置移動
//fn: callback 回調函數
//增加返回值: 將內部參數對象返回，可以通過設置返回對象的屬性stop為true打斷動畫
function requestAnimation(obj) {
//—————————————————————————————————————參數設置—————————————————————————————————————————————
//默認屬性
const parameter = {
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 = [];
for (let i of attr) {
const val = parseFloat(getComputedStyle(target)[i]);
beginAttr.push(val);
count.push(value - val);
}
}
if (value instanceof Array) {
for (let i in value) {
count[i] = value[i] - beginAttr[i];
}
}
})();
//運動函數
function animate(timestamp) {
if (parameter.stop) return; //打斷
//存儲初始時間戳
if (!start) start = timestamp;
//已運動時間
let t = timestamp - start;
//判斷多段運動
if (beginAttr instanceof Array) {
// const len = beginAttr.length //存數組長度，復用
//多段運動第1類——多屬性，同目標，同時間/不同時間
if (typeof count === "number") { //同目標
//同時間
if (typeof time === "number") {
if (t > time) t = time; //判斷是否超出目標值
//循環attr，分別賦值
for (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); //判斷是否運動完
else callback && callback(); //調用回調函數
}
return;
}
//不同時間
if (time instanceof Array) {
//循環time，attr，分別賦值
for (let i in beginAttr) {
//錯誤判斷
if (!time[i] && time[i] !== 0) {
throw new Error(
"The input time's length is not equal to attribute's length");
}
//判斷是否已經完成動畫，完成則跳過此次循環
if (parseFloat(getComputedStyle(target)[attr[i]]) === (typeof value === "number" ? value : value[i]))
continue;
// t = timestamp - start; //每次循環初始化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); //判斷函數是否運動完
else callback && 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(
"The input value's length is not equal to attribute's length");
}
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); //判斷函數是否運動完
else callback && callback(); //如果已經執行完時間最長的動畫，則調用回調函數
return;
}
//不同時間
if (time instanceof Array) {
for (let i in beginAttr) {
//錯誤判斷
if (!time[i] && time[i] !== 0) {
throw new Error(
"The input time's length is not equal to attribute's length");
}
//判斷是否已經完成動畫，完成則跳過此次循環
if (parseFloat(getComputedStyle(target)[attr[i]]) === (typeof value === "number" ? value : value[i]))
continue;
if (t > time[i]) t = time[i]; //判斷是否超出目標值
//錯誤判斷
if (!count[i] && count[i] !== 0) {
throw new Error(
"The input value's length is not equal to attribute's length");
}
if (flag || attr[i] === "opacity") curVal = Tween[tween](t, beginAttr[i], count[i], time[i]); //調用Tween，返回當前屬性值,此時計算方法為移動到寫入位置
else curVal = Tween[tween](t, beginAttr[i], count[i] + beginAttr[i], time[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);
else callback && callback();
return;
}
}
}
//單運動模式
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;
else target.style[attr] = curVal + "px";
if (t < time) requestAnimationFrame(animate);
else callback && callback();
}
requestAnimationFrame(animate);
return parameter; //返回對象，供打斷或其他用途
}
//Tween.js
/*
* t : time 已過時間
* b : begin 起始值
* c : count 總的運動值
* d : duration 持續時間
*
* 曲線方程
*
* http://www.cnblogs.com/bluedream2009/archive/2010/06/19/1760909.html
* */
let Tween = {
linear: function(t, b, c, d) { //勻速
return 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) { //減減速曲線
return -c * ((t = t / d - 1) * t * t * t - 1) + b;
},
easeBothStrong: function(t, b, c, d) { //加加速減減速曲線
if ((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);
}
return -(a * Math.pow(2, 10 * (t -= 1)) * Math.sin((t * d - s) * (2 * Math.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);
}
return 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);
}
if (t < 1) {
return -0.5 * (a * Math.pow(2, 10 * (t -= 1)) *
Math.sin((t * d - s) * (2 * Math.PI) / p)) + b;
}
return 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) { //彈球減振（彈球漸出）
return 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: function(t, b, c, d) {
if (t < d / 2) {
return Tween['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值，class值，標簽值。除變量外，其余值必須為字符串
// node: 添加的標簽名，值為字符串
// n: 節點添加個數
// className: 節點綁定的class名，，值為字符串，多個class名用空格隔開
// boolean: 是否選中所有目標父節點。可選參數，不輸入則判定為false，則只匹配選中的第一個節點
function 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(target);
//添加子節點到數組，用於返回值
obj.children[i][j] = target;
}
parent[i].appendChild(fragment)
}
} else {
//創建碎片容器
const fragment = document.createDocumentFragment();
for (let i = 0; i < n; i++) {
const target = document.createElement(node);
target.className = className;
fragment.appendChild(target);
//添加子節點，用於返回值
obj.children[i] = target;
}
//將碎片容器一次性添加到父節點
parent.appendChild(fragment);
}
//返回參數，供動畫函數調用
return obj;
}
3、案例解析
- HTML
由於節點很多，並且我想盡量做得逼真有趣一點，就給節點加了隨機位置。所以節點的輸出都是用JS控制的，HTML這邊只寫了幾個父元素盒子，加上相應的id名和class類名，結構相對簡單。
- CSS
CSS部分的難點就是流星的樣式和用圈圈畫雲層，然后將雲層堆疊出立體效果。
首先說一下流星的樣式：
#sky .star {
position: absolute;
opacity: 0;
z-index: 10000;
}
.star::after {
content: "";
display: block;
border: solid;
border-width: 2px 0 2px 80px;
/*流星隨長度逐漸縮小*/
border-color: transparent transparent transparent rgba(255, 255, 255, 1);
border-radius: 2px 0 0 2px;
transform: rotate(-45deg);
transform-origin: 0 0 0;
box-shadow: 0 0 20px rgba(255, 255, 255, .3);
}
先提取了公共樣式，添加定位屬性；
然后在star后通過after偽類添加流星，用border特性畫：
1）模型繪制： border-width的順序為四邊top、right、bottom、left，同理border-color的順序也為四邊top、right、bottom、left。這樣將border-width與border-color一一對應后，就能看出2px是流星的寬度，80px是流星的長度，而0px就是流星的尾巴。這樣就形成了一個頭部2px寬，尾部0px，長度80px的流星模型;
2）稍微逼真： 通過border-radius給流星的頭部增加個圓角，讓它看起來emmmmmmm更逼真？最后通過roteta旋轉一個角度，讓它看起來像是往下掉;
3）增加閃光： 通過box-shadow 給流星增加一點光暈，讓它看起來有閃光的效果;
通過以上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"],
value: [150, -150, .8],
time: timer,
flag: false,
fn: function() {
requestAnimation({
ele: obj.children[i],
attr: ["top", "left", "opacity"],
value: [150, -150, 0],
time: timer,
flag: false,
fn: () => {
obj.parent.removeChild(obj.children[i]); //動畫結束刪除節點
}
})
}
});
}
}, 1000);
這里邊用到了我自己封裝的兩個方法，一個是基於requestAnimationFrame的requestAnimation，以及基於appendChild的addChild。
為了達成星星位置隨機的效果，通過定時器setInterval不停的插入與刪除流星：
首先，每次添加2個流星到頁面，但是定時器的間隔時間小於流星的動畫時間，這樣就能保證頁面中的流星的數量不是一個固定值，但肯定是大於2的。不然一次2個流星略顯冷清;
然后，通過for循環（也可以用for-in，for-of，都行。for-of最簡單）給每個新添加到頁面中的流星一個隨機的位置（top、left）、隨機的大小（scale）、隨機的動畫執行時間（timer）;
最后，在for循環中，給每個新添加到頁面中的流星加上動畫，並通過回調函數在執行完動畫后刪除節點。這里要注意的是，動畫要分成兩個階段（出現與消失，主要是opacity控制）。另外我這里的處理，每個流星都移動相同的距離300px，這個距離我覺得也可以通過隨機數控制，但我犯了個懶，就沒有做。
4、小問題
目前我發現的問題有2個：
一是DOM操作本身的問題。頁面不停的添加與刪除節點，造成不停地回流與重繪，很耗性能;
二是requestAnimationFrame本身的問題。因為定時器不斷在添加節點，而requestAnimationFrame的特性——當離開當前頁面去瀏覽其他頁面時，動畫會暫停。這就造成了一個問題，節點一直在加，但動畫全停在那沒有執行。那么下次再回到這個頁面的時候，就boom!！！動畫就炸了，你會看到畫面一卡，很多小蝌蚪集體出動去找媽媽;
5、結語
這個小案例雖然從難度上來看很簡單，但是它可拓展性很高——比如表個白啊、寄個相思、耍個浪漫啊等等（手動狗頭doge），而且用純CSS也可以實現（我也寫了一版純CSS的，因為不能隨機位置隨機大小，所以看起來比較靜態一點，就不貼了）。所以對於了解CSS動畫與JS動畫，是個很不錯的練手小案例。
感謝看完這篇文章的可愛的人兒，希望你能從中獲得靈感如果能給你帶來幫助，那我是極高興地如果你把靈感告訴我，那我就can't happniess anymore了~
最后，再次感謝，如果有優化寫法，歡迎指導~