CSS3 realisiert die Animation des Shuttle-Sternenhimmels

<canvas id="Sternenfeld"></canvas>

* {
  Hintergrund: schwarz;
  Polsterung: 0;
  Rand: 0;
}

Leinwand {
  Polsterung: 0;
  Rand: 0;
  Breite: 100 %;
  Höhe: 100 %;
}

Funktion $i(t) {
    gibt document.getElementById(t) zurück
}
Funktion $r(t, r) {
    document.getElementById(t).removeChild(document.getElementById(r))
}
Funktion $t(t) {
    gibt document.getElementsByTagName(t) zurück
}
Funktion $c(t) {
    gibt String.fromCharCode(t) zurück
}
Funktion $h(t) {
    return ("0" + Math.max(0, Math.min(255, Math.round(t))).toString(16)).slice(-2)
}
Funktion _i(t, r) {
    $t("div")[t].innerHTML += r
}
Funktion _h(t) {
    Rückkehreinstellungen ? Math.round(t / 2) : t
}
Funktion Bildschirmgröße abrufen() {
    var t = Dokument.documentElement.clientWidth,
        r = Dokument.Dokumentelement.Clienthöhe;
    gibt Array(t, r) zurück
}
Funktion init() {
    für (var t = 0; n > t; t++) Stern[t] = neues Array(5), Stern[t][0] = Math.random() * w * 2 - 2 * x, Stern[t][1] = Math.random() * h * 2 - 2 * y, Stern[t][2] = Math.round(Math.random() * z), Stern[t][3] = 0, Stern[t][4] = 0;
    var r = $i("Sternenfeld");
    r.style.position = "absolut", r.width = b, r.height = h, Kontext = r.getContext("2d"), Kontext.fillStyle = "rgb(0,0,0)", Kontext.strokeStyle = "rgb(255,255,255)"
}
Funktion anim() {
    Maus_x = Cursor_x – x, Maus_y = Cursor_y – y, Kontext.fillRect(0, 0, b, h);
    für (var t = 0; n> t; t ++) test =! 0, star_x_save = star [t] [3], star_y_save = star [t] [4], stern [t] [0]+= mouse_x >> 4, stern [t] [0]> x << 1 && (star [t] [0) ] += w << 1, test =! 1), stern [t] [1] += maus_y >> 4, stern [t] [1]> y << 1 && (stern [t] [1] -= h << 1, test =! 1), stern [t] [1] <-y << 1 && (star [t] [1] [1) Z && (STAR ​​[T] [2] -= Z, Test =! 1), Stern [t] [2] <0 && (Stern] [2] + = Z, Test =! 1), Stern [t] [3] = x + stern [t] [0] / stern [t] [2] * Stern, Stern [4] [4]. W> STAR_X_SAVE && STAR_Y_SAVE> 0 && H> STAR_Y_SAVE && test && (context.linewidth = 2 * (1 - star_color_ratio * star [t] [2]), context.abeginpath (), contexte.moveto (star_x_save, star_ysave), contexte.ineto .Stroke (), context.closepath ());
    Zeitüberschreitung = Zeitüberschreitung festlegen("anim()", fps)
}
Funktion start() {
    Größe ändern(), Animation()
}
Funktion Größe ändern() {
    w = parseInt (-1! = url.indexof ("w =")? + 2, url.length) .Indexof ("&"): url.length): get_screen_size () [0]), h = parseInt (-1! = Url.indexof ("h =")? "&")? 1 / z, cursor_x = x, cursor_y = y, init ()
}
var url = dokument.standort.href,
    Flagge = !0,
    Test = !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),
    w = 0,
    h = 0,
    x = 0,
    y = 0,
    z = 0,
    Sternfarbverhältnis = 0,
    star_x_save, star_y_save, star_ratio = 115,
    Sterngeschwindigkeit = 5,
    star_speed_save = 0,
    Stern = neues Array(n),
    Farbe, Deckkraft = .1,
    cursor_x = 0,
    cursor_y = 0,
    Maus_x = 0,
    Maus_y = 0,
    canvas_x = 0,
    Leinwand_y = 0,
    Leinwand_w = 0,
    canvas_h = 0,
    Kontext, Taste, Strg, Timeout, fps = 0;
Start();