CSS3でシャトル星空のアニメーションを実現

<canvas id="スターフィールド"></canvas>

* {
  背景：黒;
  パディング:0;
  マージン:0;
}

キャンバス {
  パディング:0;
  マージン:0;
  幅:100%;
  高さ:100%;
}

関数 $i(t) {
    document.getElementById(t) を返す
}
関数 $r(t, r) {
    document.getElementById(t).removeChild(document.getElementById(r))
}
関数 $t(t) {
    document.getElementsByTagName(t) を返します。
}
関数 $c(t) {
    String.fromCharCode(t) を返す
}
関数 $h(t) {
    戻り値 ("0" + Math.max(0, Math.min(255, Math.round(t))).toString(16)).slice(-2)
}
関数_i(t, r) {
    $t("div")[t].innerHTML += r
}
関数_h(t) {
    雇用を返す? Math.round(t / 2): t
}
関数 get_screen_size() {
    var t = document.documentElement.clientWidth、
        r = document.documentElement.clientHeight;
    配列(t, r)を返す
}
関数init() {
    for (var t = 0; n > t; t++) star[t] = new Array(5), star[t][0] = Math.random() * w * 2 - 2 * x, star[t][1] = Math.random() * h * 2 - 2 * y, star[t][2] = Math.round(Math.random() * z), star[t][3] = 0, star[t][4] = 0;
    var r = $i("スターフィールド");
    r.style.position = "absolute"、r.width = w、r.height = h、context = r.getContext("2d")、context.fillStyle = "rgb(0,0,0)"、context.strokeStyle = "rgb(255,255,255)"
}
関数アニメーション() {
    mouse_x = cursor_x - x、mouse_y = cursor_y - y、context.fillRect(0, 0, w, h);
    （var t = 0; n> t; t ++）test =！0、star_x_save = star [3]、star_y_save = star [t] [4]、star [0]+= mouse_x >> 4、star ] += w << 1、test =！1）、star [1] += mouse_y >> 4、星[t] [1]> y << 1 &&（st]  -  1]  -  = h << 1、test =！1）、星[T] z &&（star [t]] [2]  -  = z、test =！1）、star [t] [2] <0 &&（st]] [3] [3] = x + star [t] [0] / star w> star_x_save && star_y_save> 0 && h> star_y_save && test &&（context.linewidth = 2 *（1 -star_color_ratio * star [2]）、context.beginpath（）、context.moveto（star_x_save、star_y_save [4] 、context.closepath（））;
    タイムアウト = setTimeout("anim()", fps)
}
関数開始() {
    サイズ変更()、アニメーション()
}
関数 resize() {
    w = parseint（-1！= url.indexof（ "w ="）？url.substring（url.indexof（ "w ="） + 2、-1！ + 2、url.length）.indexof（ "＆"）：url.length）：get_screen_size（）[0]）、h = parseint（-1！= url.indexof（ "h ="）？url.substring（url.indexof（ "h ="） + 2、-1！ （ "＆"）？ io = 1 / z、cursor_x = x、cursor_y = y、init（）
}
var url = document.location.href,
    フラグ = !0,
    テスト = !0,
    n = parseInt(-1 != url.indexOf("n=") ? url.substring(url.indexOf("n=") + 2, -1 != url.substring(url.indexOf("n=") + 2, url.length).indexOf("&") ? url.indexOf("n=") + 2 + url.substring(url.indexOf("n=") + 2, url.length).indexOf("&") : url.length) : 812),
    0,
    h = 0,
    x = 0,
    y = 0,
    0,
    星の色の比率 = 0、
    星のx保存、星のy保存、星の比率 = 115、
    スタースピード = 5、
    スタースピードセーブ = 0、
    星 = 新しい配列(n)、
    色、不透明度 = .1、
    カーソルx = 0、
    カーソル_y = 0、
    マウス_x = 0、
    マウス_y = 0、
    キャンバスx = 0、
    キャンバスy = 0、
    キャンバス_w = 0、
    キャンバス_h = 0、
    コンテキスト、キー、Ctrl、タイムアウト、fps = 0;
始める（）;