Spezialeffekte für Sonnenfinsternis-Animationen, erstellt mit CSS3

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

<Stil>
html, Körper {
  Breite: 100 %;
  overflow-x: versteckt;
}

*, *:before, *:after {
  Boxgröße: border-box;
  Rand: 0;
  Polsterung: 0;
}

.universe {
  Breite: 100vw;
  Höhe: 100vh;
  Hintergrund: #030613;
  Anzeige: blockieren;
  Position: relativ;
  -webkit-animation: skyDim 4s 8s linear vorwärts;
          Animation: skyDim 4s 8s linear vorwärts;
}

.universe:before {
  Inhalt: "";
  Box-Shadow: 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;
  Breite: 4px;
  Höhe: 4px;
  Position: absolut;
  Randradius: 50 %;
  -webkit-animation: SterneFloating 100s -200s linear beide unendlich;
          Animation: SterneFloating 100s -200s linear beide unendlich;
}

.universe:after {
  Inhalt: "";
  Box-Shadow: 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 1px #FFF, 54vw 5vh 1px #FFF, 22vw 29vh 1px #FFF, 39vw 71vh 1px #FFF, 11vw 11vh #FFF, 88vw 82vh #fff;
  Breite: 2px;
  Höhe: 2px;
  Position: absolut;
  Randradius: 50 %;
  -webkit-animation: starsFloating 100s 3s linear rückwärts unendlich;
          Animation: SterneFloating 100s 3s linear rückwärts unendlich;
}

.sun {
  Höhe: 200px;
  Breite: 200px;
  Randradius: 50 %;
  Hintergrund: #cfcfd4;
  Box-Shadow: 0 0 60px Gold, 0 0 100px #b9a018, Einschub 0 5px 35px 53px #dbdbdb, Einschub 48px 8px 34px 25px #c4c4c4;
  links: calc(50% - 100px);
  oben: calc(50% - 100px);
  Position: absolut;
  -webkit-animation: sunFreakOut 5s 7.1s linear vorwärts;
          Animation: sunFreakOut 5s 7,1s linear vorwärts;
}

.moon {
  Höhe: 50px;
  Breite: 50px;
  Randradius: 50 %;
  Hintergrund: rgba(0, 0, 0, 0,99);
  Box-Shadow: Einschub 5px 1px 10px -8px #d4d4d6;
  -webkit-transition: 1s;
  Übergang: 1s;
  oben: calc(40% - 100px);
  Position: absolut;
  Z-Index: 5;
  -webkit-animation: 20s Easy-in-out vorwärts bewegen;
          Animation: 20s Easy-In-Out nach vorne bewegen;
}

@-webkit-keyframes verschieben {
  0 % {
    -webkit-transform: TranslateX(100vw);
            transformieren: translatorX(100vw);
  }
  40 %, 60 % {
    oben: calc(50% - 100px);
  }
  50 %, 50,5 % {
    Breite: 200px;
    Höhe: 200px;
    -webkit-transform: TranslateX(calc(50vw - 100px));
            transform: translatorX(calc(50vw - 100px));
    Box-Shadow: Einschub 20px 1px 35px -15px #d4d4d6;
    oben: calc(50% - 100px);
  }
  60 % {
    box-shadow: inset -20px 1px 35px -15px #d4d4d6;
  }
  100 % {
    Breite: 50px;
    Höhe: 50px;
    -webkit-transform: TranslateX(calc(-1vw - 60px));
            transform: translatorX(calc(-1vw - 60px));
    oben: calc(40% - 100px);
    box-shadow: inset -5px 1px 10px -8px #d4d4d6;
  }
}

@keyframes verschieben {
  0 % {
    -webkit-transform: TranslateX(100vw);
            transformieren: translatorX(100vw);
  }
  40 %, 60 % {
    oben: calc(50% - 100px);
  }
  50 %, 50,5 % {
    Breite: 200px;
    Höhe: 200px;
    -webkit-transform: TranslateX(calc(50vw - 100px));
            transform: translatorX(calc(50vw - 100px));
    Box-Shadow: Einschub 20px 1px 35px -15px #d4d4d6;
    oben: calc(50% - 100px);
  }
  60 % {
    box-shadow: inset -20px 1px 35px -15px #d4d4d6;
  }
  100 % {
    Breite: 50px;
    Höhe: 50px;
    -webkit-transform: TranslateX(calc(-1vw - 60px));
            transform: translatorX(calc(-1vw - 60px));
    oben: calc(40% - 100px);
    box-shadow: inset -5px 1px 10px -8px #d4d4d6;
  }
}
@-webkit-keyframes skyDim {
  0 %, 100 % {
    Hintergrund: #030613;
  }
  50 %, 70 % {
    Hintergrund: schwarz;
  }
}
@keyframes skyDim {
  0 %, 100 % {
    Hintergrund: #030613;
  }
  50 %, 70 % {
    Hintergrund: schwarz;
  }
}
@-webkit-keyframes sunFreakOut {
  0 %, 100 % {
    Box-Shadow: 0 0 60px Gold, 0 0 100px #b9a018, Einschub 0 5px 35px 53px #dbdbdb, Einschub 48px 8px 34px 25px #c4c4c4;
  }
  50 %, 70 % {
    box-shadow: 0 0 50px #e30000, 0 0 0px #b91818, Einschub 0 5px 35px 53px #dbdbdb, Einschub 48px 8px 34px 25px #c4c4c4;
  }
}
@keyframes sunFreakOut {
  0 %, 100 % {
    Box-Shadow: 0 0 60px Gold, 0 0 100px #b9a018, Einschub 0 5px 35px 53px #dbdbdb, Einschub 48px 8px 34px 25px #c4c4c4;
  }
  50 %, 70 % {
    box-shadow: 0 0 50px #e30000, 0 0 0px #b91818, Einschub 0 5px 35px 53px #dbdbdb, Einschub 48px 8px 34px 25px #c4c4c4;
  }
}
@-webkit-keyframes starsFloating {
  0 % {
    Deckkraft: 0;
  }
  10 % {
    Deckkraft: 1;
  }
  100 % {
    -webkit-transform: TranslateY(-100vh);
            transform: translatorY(-100vh);
  }
}
@keyframes starsFloating {
  0 % {
    Deckkraft: 0;
  }
  10 % {
    Deckkraft: 1;
  }
  100 % {
    -webkit-transform: TranslateY(-100vh);
            transform: translatorY(-100vh);
  }
}
</style>
</head>

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