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

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

結果:

html

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

CS

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

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

js

関数 $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;
始める();

以上がCSS3を使ってスタースタッズアニメーションを実現する方法の詳細です。CSS3スタースタッズアニメーションの詳細については、123WORDPRESS.COMの他の関連記事に注目してください。

<<:  Win10でのJDKのインストールと環境変数の設定に関する詳細なチュートリアル

>>:  MySQL チュートリアル: サブクエリの例の詳細な説明

推薦する

Linux で MySQL のスケジュールバックアップを実装する方法

実際のプロジェクトでは、緊急事態を防ぐためにデータベースを頻繁にバックアップする必要があります。しば...

ul リスト タグ デザイン ウェブ ページ 複数列レイアウト

数日前、CSS で 3 列レイアウトを書いていたときに、突然この方法を思いつきました。このアイデアは...

擬似分散グラフィックを実現するための VMware 構成 Hadoop チュートリアル

1. 実験環境シリアルナンバープロジェクトソフトウェアとバージョン1オペレーティング·システムCen...

Ubuntu 20.04 に MySql5.7 をインストールして構成するための詳細なチュートリアル

目次1. Ubuntuソースの変更2. MySQLをインストールする3. 新しいユーザーを作成し、権...

flexとは何か、flexレイアウト構文の詳細なチュートリアル

フレックスレイアウトFlex は Flexible Box の略で、「柔軟なレイアウト」を意味します...

WeChatアプレットでQRコードを識別するために長押しする実装プロセス

序文公式アカウントのQRコードは長押しで認識できることは皆さんご存じですが、ミニプログラムに対する制...

ドロップダウンメニューを実装するためのネイティブ js

ドロップダウン メニューも実生活では非常に一般的です。実装に使用される js コードは、タブ選択やア...

最新の JavaScript で非同期タスクを書く方法

序文この記事では、非同期 JavaScript の進化と、それがコードの記述方法にどのような変化をも...

Web デザインにおける Less と More について語る (写真)

Less is More は多くのデザイナーのキャッチフレーズです。これは建築界の巨匠ルートヴィヒ...

CentOS に MySQL をインストールしてリモート アクセスを設定する方法

1. MySQLリポジトリソースをダウンロードする$ wget http://repo.mysql....

Navicat でストアド プロシージャ、トリガーを作成し、カーソルを使用する簡単な例 (画像とテキスト)

1. テーブルを作成する<br /> まず、2 つのテーブル (users テーブルと...

ActiveMQ メッセージ サービスを構築するための Docker 学習方法の手順

序文ActiveMQ は、Apache が開発した最も人気があり強力なオープン ソース メッセージ ...

Navicatを使用してクラウドサーバーデータベースにリモート接続する方法

秘密鍵を開かずにリモート サーバーのデータベースに接続するのは非常に便利です。新しい接続でデータを入...

Linuxで中断されたシステムを呼び出す方法

序文低速システム コールとは、決して戻らない可能性があり、プロセスを永久にブロックするシステム コー...

Docker で Ubuntu に Python3 と Pip をインストールする際の問題

文章1) Ubuntuイメージをダウンロードする docker プル Ubuntu 2) 画像を見る...