Effets spéciaux d'animation d'éclipse solaire réalisés avec CSS3

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

<style>
html, corps {
  largeur : 100 % ;
  overflow-x : caché ;
}

*, *:avant, *:après {
  dimensionnement de la boîte : border-box ;
  marge : 0;
  remplissage : 0 ;
}

.univers {
  largeur : 100vw;
  hauteur : 100vh;
  arrière-plan : #030613;
  affichage : bloc ;
  position : relative ;
  -webkit-animation : skyDim 4s 8s avant linéaire ;
          animation : skyDim 4s 8s linéaire vers l'avant ;
}

.universe :avant {
  contenu : "" ;
  boîte-ombre : 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;
  largeur : 4px ;
  hauteur : 4px ;
  position : absolue ;
  rayon de bordure : 50 % ;
  -webkit-animation : étoiles flottantes de 100 à 200 s linéaires toutes deux infinies ;
          animation : étoiles flottantes de 100 à 200 s linéaires toutes deux infinies ;
}

.universe :après {
  contenu : "" ;
  boîte-ombre : 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;
  largeur : 2 px ;
  hauteur : 2px ;
  position : absolue ;
  rayon de bordure : 50 % ;
  -webkit-animation : étoiles flottantes 100 s 3 s linéaires vers l'arrière infini ;
          animation : étoiles flottantes 100 s 3 s linéaires vers l'arrière infini ;
}

.soleil {
  hauteur : 200px ;
  largeur : 200 px ;
  rayon de bordure : 50 % ;
  arrière-plan : #cfcfd4;
  box-shadow : 0 0 60px gold, 0 0 100px #b9a018, encart 0 5px 35px 53px #dbdbdb, encart 48px 8px 34px 25px #c4c4c4 ;
  à gauche : calc(50% - 100px);
  en haut : calc(50% - 100px);
  position : absolue ;
  -webkit-animation : sunFreakOut 5s 7.1s avant linéaire ;
          animation : sunFreakOut 5s 7,1s avant linéaire ;
}

.lune {
  hauteur : 50px ;
  largeur : 50px ;
  rayon de bordure : 50 % ;
  arrière-plan : rgba(0, 0, 0, 0,99);
  box-shadow : encart 5px 1px 10px -8px #d4d4d6;
  -webkit-transition : 1s ;
  transition : 1 s ;
  en haut : calc(40% - 100px);
  position : absolue ;
  indice z : 5 ;
  -webkit-animation : avancez la facilité d'entrée et de sortie de 20 s ;
          animation : avancer de 20 secondes en douceur ;
}

@-webkit-keyframes déplace {
  0% {
    -webkit-transform : translateX(100vw);
            transformer : translateX(100vw);
  }
  40%, 60% {
    en haut : calc(50% - 100px);
  }
  50 %, 50,5 % {
    largeur : 200 px ;
    hauteur : 200px ;
    -webkit-transform : translateX(calc(50vw - 100px));
            transformer : translateX(calc(50vw - 100px));
    box-shadow : encart 20px 1px 35px -15px #d4d4d6;
    en haut : calc(50% - 100px);
  }
  60 % {
    box-shadow : encart -20px 1px 35px -15px #d4d4d6;
  }
  100% {
    largeur : 50px ;
    hauteur : 50px ;
    -webkit-transform : translateX(calc(-1vw - 60px));
            transformer : translateX(calc(-1vw - 60px));
    en haut : calc(40% - 100px);
    box-shadow : encart -5px 1px 10px -8px #d4d4d6 ;
  }
}

@keyframes bouge {
  0% {
    -webkit-transform : translateX(100vw);
            transformer : translateX(100vw);
  }
  40%, 60% {
    en haut : calc(50% - 100px);
  }
  50 %, 50,5 % {
    largeur : 200 px ;
    hauteur : 200px ;
    -webkit-transform : translateX(calc(50vw - 100px));
            transformer : translateX(calc(50vw - 100px));
    box-shadow : encart 20px 1px 35px -15px #d4d4d6;
    en haut : calc(50% - 100px);
  }
  60 % {
    box-shadow : encart -20px 1px 35px -15px #d4d4d6;
  }
  100% {
    largeur : 50px ;
    hauteur : 50px ;
    -webkit-transform : translateX(calc(-1vw - 60px));
            transformer : translateX(calc(-1vw - 60px));
    en haut : calc(40% - 100px);
    box-shadow : encart -5px 1px 10px -8px #d4d4d6 ;
  }
}
@-webkit-keyframes skyDim {
  0%, 100% {
    arrière-plan : #030613;
  }
  50%, 70% {
    fond : noir ;
  }
}
@keyframes skyDim {
  0%, 100% {
    arrière-plan : #030613;
  }
  50%, 70% {
    fond : noir ;
  }
}
@-webkit-keyframes sunFreakOut {
  0%, 100% {
    box-shadow : 0 0 60px gold, 0 0 100px #b9a018, encart 0 5px 35px 53px #dbdbdb, encart 48px 8px 34px 25px #c4c4c4 ;
  }
  50%, 70% {
    box-shadow : 0 0 50px #e30000, 0 0 0px #b91818, encart 0 5px 35px 53px #dbdbdb, encart 48px 8px 34px 25px #c4c4c4 ;
  }
}
@keyframes sunFreakOut {
  0%, 100% {
    box-shadow : 0 0 60px gold, 0 0 100px #b9a018, encart 0 5px 35px 53px #dbdbdb, encart 48px 8px 34px 25px #c4c4c4 ;
  }
  50%, 70% {
    box-shadow : 0 0 50px #e30000, 0 0 0px #b91818, encart 0 5px 35px 53px #dbdbdb, encart 48px 8px 34px 25px #c4c4c4 ;
  }
}
@-webkit-keyframes starsFloating {
  0% {
    opacité : 0;
  }
  10% {
    opacité : 1;
  }
  100% {
    -webkit-transform : traduireY(-100vh);
            transformer : traduireY(-100vh);
  }
}
@keyframes starsFloating {
  0% {
    opacité : 0;
  }
  10% {
    opacité : 1;
  }
  100% {
    -webkit-transform : traduireY(-100vh);
            transformer : traduireY(-100vh);
  }
}
</style>
</tête>

Les crackées CSS3 de la crackée CSS3 sont conçues pour répondre aux besoins des utilisateurs.闪烁动画特效，效果很漂亮