CSS3를 사용한 우주 비행사 애니메이션 특수 효과

<제목> CSS宇航员</title>
<스타일>
*{
  마진: 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%{
    -웹킷 변환: 회전(0deg);
            변환: 회전(0deg);
  }
  100%{
    -웹킷 변환: 회전(360도);
            변환: 회전(360deg);
  }
}
.box-of-star1,
.box-of-star2,
.box-of-star3,
.box-of-star4{
  너비: 100%;
  위치: 절대;
  Z-색인: 10;
  왼쪽: 0;
  -webkit-transform: 번역Y(650px);
          변환: 번역Y(650px);
}
.box-of-star1{
  -webkit-animation: snow 5s 선형 무한;
}
.box-of-star2{
  -webkit-animation: 눈 5초 -1.64초 선형 무한;
}
.box-of-star3{
  -webkit-animation: 눈 5초 -2.30초 선형 무한;
}
.box-of-star4{
  -webkit-animation: 눈 5초 -3.30초 선형 무한;
}

css3는 css3의 중앙 공간을 사용하여 중앙에 있는 css3를 사용합니다.