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 チュートリアル: サブクエリの例の詳細な説明

推薦する

HTML 5.1 学習: 14 の新機能とアプリケーション例

序文ご存知のとおり、HTML5 はインターネット コミュニティ全体に標準を提供する組織である Wor...

JavaScript配列をツリー構造に変換する方法

1. 需要バックエンドは、フロントエンドがツリー構造(重複データなし)に変換するためのデータを提供し...

MySQLカーソルの詳細な紹介

目次1. カーソルとは何ですか? 2. カーソルの使い方1. カーソルを宣言する2.カーソルを開く3...

MySQLの基本操作学習ノートテーブル

テーブルを作成テーブルテーブル名を作成create table if not exists 表名 m...

Windows 10 システムで Mysql8.0.13 のルート パスワードを忘れる方法

1. まずmysqlサービスを停止します管理者としてCMDを開いて閉じるか、Windowsサービスペ...

MySQL 継続的集計の原理と使用法の分析

この記事では、例を使用して、MySQL の継続的な集計の原理と使用方法を説明します。ご参考までに、詳...

Dockerコンテナアプリケーションログの表示方法

docker アタッチコマンドdocker attach [options] 容器実行中のコンテナに...

MySQL に外部キー制約を追加する具体的な方法

このチュートリアルの動作環境: Windows 7 システム、MySQL 8 バージョン、Dell ...

GDBデバッグMySQL実戦ソースコードコンパイルとインストール

ソースコードをダウンロード git クローン https://github.com/mysql/my...

フロントエンドの HTML 知識ポイントのまとめ (推奨)

1. HTMLの概要htyper テキスト マークアップ言語 ハイパーテキスト マークアップ言語ハ...

.NETCore Dockerはコンテナ化とプライベートイメージリポジトリ管理を実装します

1. Dockerの紹介Docker は Linux オペレーティングシステムの一部の機能をベースに...

JavaScriptオブジェクト指向について学ぼう

目次JavaScript プロトタイプチェーンオブジェクトプロトタイプトップレベルのプロトタイプOb...

HTML独習の旅(I)基本要素と属性の練習(自分でコードを書く)

私は W3school のチュートリアルに従いました。チュートリアルはとても良いと思います。各セクシ...

CSS を使用して正方形の div を実装する 2 つの方法

目標: 辺の長さが等しい正方形を作成する方法 1: 単位 vw を使用する (ps これが最も簡単な...

Dockerfile における ENTRYPOINT と CMD の違い

Docker システムの学習チュートリアルでは、Dockerfile を使用して Docker イメ...