CSS3 特殊効果の宇宙飛行士アニメーション

これは、宇宙での宇宙飛行士の落下アニメーション効果の純粋な CSS3 実装です。

<スタイル>
*{
マージン: 0;
パディング: 0;
}
体{＃＃＃ 背景色: #102037;
オーバーフロー: 非表示;
}
@-webkit-keyframes 雪 {
0% { 不透明度: 0; -webkit-transform: 変換 Y(0px); 変換: 変換 Y(0px); }
20%{ 不透明度: 1;}
100% { 不透明度: 1; -webkit-transform: 変換 Y(650px); 変換: 変換 Y(650px); }
}
@keyframes 雪 {
0% { 不透明度: 0; -webkit-transform: 変換 Y(0px); 変換: 変換 Y(0px); }
20%{ 不透明度: 1;}
100% { 不透明度: 1; -webkit-transform: 変換 Y(650px); 変換: 変換 Y(650px); }
}
@-webkit-keyframes 宇宙飛行士{
0%{
-webkit-transform: 回転(0度);
変換: 回転(0度);
}
100%{
-webkit-transform: 回転(360度);
変換: 回転(360度);
}
}
.box-of-star1,
.box-of-star2,
.box-of-star3,
.box-of-star4{
幅: 100%;
位置: 絶対;
z インデックス: 10;
左: 0;
-webkit-transform:translateY(650px);
変換:translateY(650px);
}
.box-of-star1{
-webkit-animation: 雪 5 秒リニア無限;
}
.box-of-star2{
-webkit-animation: 雪 5 秒 -1.64 秒線形無限;
}
.box-of-star3{
-webkit-animation: 雪 5 秒 -2.30 秒 リニア無限;
}
.box-of-star4{
-webkit-animation: 雪 5 秒 -3.30 秒 リニア無限;
}
。星{＃＃＃ 幅: 3px;
高さ: 3px;
境界半径: 50%;
背景色: #FFF;
位置: 絶対;
z インデックス: 10;
不透明度: .7;
}
.star:前{
コンテンツ： "";＃＃＃ 幅: 6px;
高さ: 6px;
境界半径: 50%;
背景色: #FFF;
位置: 絶対;
z インデックス: 10;
上: 40px;
左: 70px;
不透明度: .7;
}