2. 程式人生 > >CSS+JS實現幸運快三原始碼開發流星雨動畫

CSS+JS實現幸運快三原始碼開發流星雨動畫

阿新 • • 發佈：2018-11-05

2、原始碼幸運快三原始碼開發QQ2952777280【話仙原始碼論壇】hxforum.com
HTML

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
/*

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©) {
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©) {
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©) {
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動畫，是個很不錯的練手小案例。

相關推薦

CSS+JS實現幸運快三原始碼開發流星雨動畫

2、原始碼幸運快三原始碼開發QQ2952777280【話仙原始碼論壇】hxforum.com HTML CSS /* ------------reset------------ */ { margin: 0; p

touch命令幸運快三原始碼開發

一．命令格式： touch [參幸運快三原始碼開發QQ2952777280【話仙原始碼論壇】hxforum.com 數]… 檔案… 回到頂部(go to top) 二．命令引數： 引數 描述 -a 或–time=atime或–time=access或–time=use 　只更改存取時間。 -

Apache Spark on K8s的安全幸運快三原始碼開發性和效能優化

前言 Apache Spark是目前最為幸運快三原始碼開發QQ2952777280【話仙原始碼論壇】hxforum.com 流行的大資料計算框架，與Hadoop相比，它是替換MapReduce元件的不二選擇，越來越多的企業正在從傳統的MapReduce作業排程

JVM監控全體快三原始碼開發和調優常用命令工具總結

JVM監控全體快三原始碼開發QQ2952777280【話仙原始碼論壇】hxforum.com和調優 在Java應用和服務出現莫名的卡頓、CPU飆升等問題時總是要分析一下對應程序的JVM狀態以定位問題和解決問題並作出相應的優化，在這過程中Java自帶的一些狀態監控

用html+css+js實現中國象棋小遊戲開發專案

var game={ RN:10,//行數 CN:9,//列數 CSIZE:40,//每個單元格大小 OFFSET:20,//單元格區域距離最外層邊界的距離， URL:"images/chess.png",//儲存所有棋子的圖片地址 data:null,//實時儲存棋盤中棋子的物件 chessP

幸運快三原始碼出售Shiro入門這篇就夠了

前言本文主要講解的知識點有以下：許可權管理的基礎知識模型粗粒度和細粒度的概念回顧URL攔截的實現Shiro的介紹與簡單入門一、Shiro基礎知識在學習Shiro這個框架之前，首先我們要先了解Shiro需要的基礎知識：許可權管理1.1什麼是許可權管理？只要有使用者參與的系統一般

從產品經理的角度幸運快三源碼開發，看手機端語音助手

理解 以及 體驗 意圖 參考 自然語言理解 入門 意思 文章 本文從PM的角度對手機端語音助手進行了思考，包括當前市場情況、PM在設計產品時的思路等。 從產品經理的角度，看手機端語音助手 一、手機端語音助手的現狀 蘋果siri的出現，帶動了手機端智能助手的發展，如今，蘋果s

synchronized實現快三原始碼出售原理

一、synchronized用法 Java中的快三原始碼出售QQ2952777280【話仙原始碼論壇】hxforum.com 同步塊用synchronized標記。 同步塊在Java中是同步在某個物件上（監視器物件）。 所有同步在一個物件上的同步塊在同時只能被一個執行緒進入並執行操作

原生JS實現tab切換--web前端開發

soft 楊冪 microsoft hidden isp 老婆 tex oct rip tab切換非常常見，應用非常廣泛，比較實用，一般來說是一個網站必不可少的一個效果。例如：https://123.sogou.com/中的一個tab部分： 1、案例源代碼 <!DO

原生JS實現ajax省市區三聯

cal tex -type con arr length view thead () <!-- /** * @fileName: linkageUI.class.php * @author: wk * @DateTime: 2017/10/29 17:25 * @De

thinkPHP 框架開發極速快三網站開發環境部署運行調試

fin core leg nco cts flush pom 中文 網站開發 環境要求 1、極速快三網站開發(Q2222168869) 下載 2、thinkPHP 框架開發各地快三玩法 下載 3、Apache Maven 3.3+ 下載 4、MySql 5.7+ 下載 導入

使用ideal搭建繼承幸運快三源碼出售及聚合maven項目

根據 點擊 子項目 mode man artifact 位置 web 方式 使用ideal搭建幸運快三源碼出售論壇：haozbbs.com Q1446595067以下工程目錄結構記錄： 1.首先搭建taotao-parent，這是一個父工程，搭建步驟如下: 不要勾選Crea

01MBR分區幸運快三平臺搭建結構、DPT分區表、EBR擴展引導

code 值轉換 內容 電腦 ntfs 無法 字節數 window oot 主引導幸運快三平臺搭建論壇：haozbbs.com Q1446595067 記錄（Master Boot Record，縮寫：MBR），又叫做主引導扇區，是計算機開機後訪問硬盤時所必須要讀取的首個扇

解決android studio 導快三網站開發入module作為lib使用時不顯示的問題

android-l 顯示 manifest 若是 文件 sde tools follow idm 1.快三網站開發 haozbbs.com Q1446595067 將 android module導入 android project 中 這裏寫圖片描述 這裏寫圖片描述2.在

淺談Android中幸運快三平臺出租的meta-data及其應用

key 引用 平臺 name 如何 Coding pri sch xxxxx 在日常幸運快三平臺出租 haozbbs.com Q1446595067 的Android開發中，AndroidManifest中總會出現一些標簽，或是第三方SDK配置信息，或是系統配置，不禁讓人

SpringMvc 及極速快-三平臺開發工作原理和作用

上下 struts ont 通用 tex 環境 返回 子郵件 iba 極速快-三平臺開發Q1446595067工作原理： 1.springmvc請所有的請求都提交給DispatcherServlet,它會委托應用系統的其他模塊負責負責對請求進行真正的處理工作。

Linux系統下吉林快-三平臺開發環境搭建以及關於變量的基本操作

end 進行 相關操作 and 之前 超級用戶 oss 這樣的 常見 有問題聯系Q1446595067吉林快-三平臺開發, 是一種面向對象的解釋型計算機程序設計語言，由荷蘭人Guido van Rossum於1989年發明，第一個公開發行版發行於1991年。 Python是

CSS+JS實現隨機大小骰子

div right items out box 100% otto add child CSS部分 1 <style> 2 * { 3 margin: 0; 4 paddi

前端案例分享（一）：CSS+JS實現流星雨動畫

目錄 引言 1、效果圖 2、原始碼 3、案例解析 4、小問題 5、結語 引言        平常會做一些有意思的小案例練手，通常都會發到codepen上，但是codepen不能寫分析。  &nb

CSS+JS實現流星雨動畫

引言        平常會做一些有意思的小案例練手，通常都會發到codepen上，但是codepen不能寫分析。        所以就在部落格上開個案例分享系列，對de