スタイル：
.loding {
幅：100％;
高さ：100％;
}
.bg {
幅：100％;
高さ：100％;
マージン：0;
オーバーフロー：隠されました;
背景：＃000;
位置：相対;
Zインデックス：999;
}
#stars {
マージン：0自動;
最大幅：1600px;
位置：固定;
トップ：0;
左：0;
右：0;
下：0;
Zインデックス：2。
}
。星 {
表示ブロック;
幅：1ピクセル。
背景：透明;
位置：相対;
不透明度：0;
/ *トランジションアニメーション* /
アニメーション：無限線形スター落下3S;
-webkit-アニメーション：スターフォール3Sリニア無限。
-moz-アニメーション：無限線形スター落下3S;
}
.star：後{
内容： '';
表示ブロック;
ボーダー：0PX固体#FFF;
ボーダー幅：0PX 90PX 2ピクセル90PX;
ボーダー色：透明、透明、透明RGBA（255、255、255、1）。
ボックスシャドウ：0 0 1ピクセル0 RGBA（255、255、255、.1）。
/ * *ディストーション/
変換：回転（-45deg）translate3d（1ピクセル、3px、0）;
-webkit-変換：回転（-45deg）translate3d（1ピクセル、3px、0）;
-moz-変換：回転（-45deg）translate3d（1ピクセル、3px、0）;
変換起源：0％100％;
-webkit-変換起源：0％100％;
-moz-変換起源：0％100％;
}
@keyframesスターフォール{
0％{
不透明度：0;
変換：スケール（0.5）translate3d（0、0、0）;
-webkit-変換：スケール（0.5）translate3d（0、0、0）;
-moz-変換：スケール（0.5）translate3d（0、0、0）;
}
50％{
不透明度：1;
変換：translate3d（-200px、200pxの、0）;
-webkit-変換：translate3d（-200px、200pxの、0）;
-moz-変換：translate3d（-200px、200pxの、0）;
}
100％{
不透明度：0;
変換：スケールを（1.2）translate3d（-300px、300ピクセル、0）;
-webkit-変換：スケール（1.2）translate3d（-300px、300ピクセル、0）;
-moz-変換：スケール（1.2）translate3d（-300px、300ピクセル、0）;
}
}
体：
<DIV CLASS = "loding">
<のdivクラス= "BG">
<DIV ID = "星">
<DIV CLASS = "スター" スタイル= "トップ：0PX;左：300ピクセル;"> </ div>
<DIV CLASS = "スター" スタイル= "トップ：0PX;左：130px;"> </ div>
</ div>
</ div>
</ div>
JS：
（関数 （） {
聞かせて星=のdocument.getElementById（ '星'）;
{（J ++; J <80 VAR J = 0）のための
聞かせてニュースター=のdocument.createElement（ "DIV"）;
newStar.className = "スター"
newStar.style.top = randomDistance（500、-100）+ 'PX'
newStar.style.left = randomDistance（1300、300）+ 'PX'
stars.appendChild（ニュースター）
}
関数randomDistance（MAX、MIN）{
聞かせて距離= Math.floor（Math.random（）*（最大 - 最小+ 1）+分）
戻り距離
}
VARスター= document.getElementsByClassName（ 'スター'）
ため（VAR I = 0、LEN = star.length; I <lenは、I ++）{
スター[i]は.style.animationDelayは私％6 == 0 =？'0'：私は 'S' + 0.1 *
}
}）（）;