CSS3로 만든 일식 애니메이션 특수 효과

<머리>
<meta charset="utf-8">
<title>逼真的CSS3日食动画特效</title>

<스타일>
HTML, 본문 {
  너비: 100%;
  오버플로-x: 숨김;
}

*, *:이전, *:이후 {
  상자 크기 조정: 테두리 상자;
  마진: 0;
  패딩: 0;
}

.우주 {
  너비: 100vw;
  높이: 100vh;
  배경: #030613;
  디스플레이: 차단;
  위치: 상대적;
  -webkit-animation: skyDim 4s 8s 선형 전달;
          애니메이션: skyDim 4s 8s 선형 앞으로;
}

.universe:이전 {
  내용: "";
  상자 그림자: 10vw 1vh #fff, 14vw 29vh 2px #FFF, 23vw 34vh 1px #FFF, 1vw 99vh 1px #FFF, 20vw 80vh #FFF, 90vw 10vh 2px #fff, 55vw 9vh #FFF, 24vw 4vh 1px #FFF, 50vw 99vh 1px #FFF, 74vw 40vh 1px #FFF, 80vw 9vh 1px #FFF, 20vw 80vh #FFF, 85vw 78vh #fff;
  너비: 4px;
  높이: 4px;
  위치: 절대;
  테두리 반경: 50%;
  -webkit-animation: starFloating 100s -200s 선형 모두 무한;
          애니메이션: 별플로팅 100초 -200초 선형 모두 무한;
}

.universe:이후 {
  내용: "";
  상자 그림자: 37vw 78vh #fff, 17vw 69vh #FFF, 68vw 4vh 1px #FFF, 98vw 9vh 1px #FFF, 45vw 67vh #FFF, 95vw 1vh 2px #fff, 35vw 75vh 2px #FFF, 44vw 47vh 1 px #FFF, 54vw 5vh 1px #FFF, 22vw 29vh 1px #FFF, 39vw 71vh 1px #FFF, 11vw 11vh #FFF, 88vw 82vh #fff;
  너비: 2px;
  높이: 2px;
  위치: 절대;
  테두리 반경: 50%;
  -webkit-animation: starFloating 100s 3s 선형 뒤로 무한;
          애니메이션: 별플로팅 100s 3s 선형 뒤로 무한;
}

.sun {
  높이: 200px;
  너비: 200px;
  테두리 반경: 50%;
  배경: #cfcfd4;
  상자 그림자: 0 0 60px 금, 0 0 100px #b9a018, 삽입 0 5px 35px 53px #dbdbdb, 삽입 48px 8px 34px 25px #c4c4c4;
  왼쪽: 계산(50% - 100px);
  상단: 계산(50% - 100px);
  위치: 절대;
  -webkit-animation: sunFreakOut 5s 7.1s 선형 전달;
          애니메이션: sunFreakOut 5s 7.1s 선형 앞으로;
}

.문 {
  높이: 50px;
  너비: 50px;
  테두리 반경: 50%;
  배경: rgba(0, 0, 0, 0.99);
  상자 그림자: 삽입 5px 1px 10px -8px #d4d4d6;
  -웹킷 전환: 1초;
  전환: 1초;
  상단: 계산(40% - 100px);
  위치: 절대;
  Z-색인: 5;
  -webkit-animation: 20초의 이지인아웃을 앞으로 이동합니다.
          애니메이션: 20초의 이지인아웃을 앞으로 이동합니다.
}

@-webkit-keyframes 이동 {
  0% {
    -webkit-transform: 번역X(100vw);
            변환: 번역X(100vw);
  }
  40%, 60% {
    상단: 계산(50% - 100px);
  }
  50%, 50.5% {
    너비: 200px;
    높이: 200px;
    -webkit-transform: 번역X(calc(50vw - 100px));
            변환: 번역X(calc(50vw - 100px));
    상자 그림자: 삽입 20px 1px 35px -15px #d4d4d6;
    상단: 계산(50% - 100px);
  }
  60% {
    상자 그림자: 삽입 -20px 1px 35px -15px #d4d4d6;
  }
  100% {
    너비: 50px;
    높이: 50px;
    -webkit-transform: 번역X(calc(-1vw - 60px));
            변환: 번역X(calc(-1vw - 60px));
    상단: 계산(40% - 100px);
    상자 그림자: 삽입 -5px 1px 10px -8px #d4d4d6;
  }
}

@keyframes 이동 {
  0% {
    -webkit-transform: 번역X(100vw);
            변환: 번역X(100vw);
  }
  40%, 60% {
    상단: 계산(50% - 100px);
  }
  50%, 50.5% {
    너비: 200px;
    높이: 200px;
    -webkit-transform: 번역X(calc(50vw - 100px));
            변환: 번역X(calc(50vw - 100px));
    상자 그림자: 삽입 20px 1px 35px -15px #d4d4d6;
    상단: 계산(50% - 100px);
  }
  60% {
    상자 그림자: 삽입 -20px 1px 35px -15px #d4d4d6;
  }
  100% {
    너비: 50px;
    높이: 50px;
    -webkit-transform: 번역X(calc(-1vw - 60px));
            변환: 번역X(calc(-1vw - 60px));
    상단: 계산(40% - 100px);
    상자 그림자: 삽입 -5px 1px 10px -8px #d4d4d6;
  }
}
@-webkit-keyframes skyDim {
  0%, 100% {
    배경: #030613;
  }
  50%, 70% {
    배경: 검정색;
  }
}
@keyframes skyDim {
  0%, 100% {
    배경: #030613;
  }
  50%, 70% {
    배경: 검정색;
  }
}
@-webkit-keyframes sunFreakOut {
  0%, 100% {
    상자 그림자: 0 0 60px 금, 0 0 100px #b9a018, 삽입 0 5px 35px 53px #dbdbdb, 삽입 48px 8px 34px 25px #c4c4c4;
  }
  50%, 70% {
    상자 그림자: 0 0 50px #e30000, 0 0 0px #b91818, 삽입 0 5px 35px 53px #dbdbdb, 삽입 48px 8px 34px 25px #c4c4c4;
  }
}
@keyframes sunFreakOut {
  0%, 100% {
    상자 그림자: 0 0 60px 금, 0 0 100px #b9a018, 삽입 0 5px 35px 53px #dbdbdb, 삽입 48px 8px 34px 25px #c4c4c4;
  }
  50%, 70% {
    상자 그림자: 0 0 50px #e30000, 0 0 0px #b91818, 삽입 0 5px 35px 53px #dbdbdb, 삽입 48px 8px 34px 25px #c4c4c4;
  }
}
@-webkit-keyframes 별플로팅 {
  0% {
    불투명도: 0;
  }
  10% {
    불투명도: 1;
  }
  100% {
    -webkit-transform: 번역Y(-100vh);
            변환: 번역Y(-100vh);
  }
}
@keyframes 별플로팅 {
  0% {
    불투명도: 0;
  }
  10% {
    불투명도: 1;
  }
  100% {
    -webkit-transform: 번역Y(-100vh);
            변환: 번역Y(-100vh);
  }
}
</스타일>
</머리>

这是一款不常逼真的使用纯CSS3实现的一个天狗食月日食动画特效，当日全食时，还有背景stars闪烁动画特效，效果很漂亮