Kesan khas animasi gerhana matahari yang dibuat dengan CSS3

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

<gaya>
html, badan {
  lebar: 100%;
  limpahan-x: tersembunyi;
}

*, *:sebelum, *:selepas {
  saiz kotak: kotak sempadan;
  jidar: 0;
  pelapik: 0;
}

.alam semesta {
  lebar: 100vw;
  ketinggian: 100vh;
  latar belakang: #030613;
  paparan: blok;
  jawatan: saudara;
  -webkit-animasi: skyDim 4s 8s linear ke hadapan;
          animasi: skyDim 4s 8s linear ke hadapan;
}

.universe:sebelum {
  kandungan: "";
  bayang kotak: 10vw 1vh #fff, 14vw 29vh 2px #FFF, 23vw 34vh 1px #FFF, 1vw 99vh 1px #FFF, 20vw 80vh #FFF, 90vw 10vh 2px 10vh 2px #fw #FFF, 50vw 99vh 1px #FFF, 74vw 40vh 1px #FFF, 80vw 9vh 1px #FFF, 20vw 80vh #FFF, 85vw 78vh #fff;
  lebar: 4px;
  ketinggian: 4px;
  jawatan: mutlak;
  jejari sempadan: 50%;
  -webkit-animasi: bintang Terapung 100s -200s linear kedua-duanya tidak terhingga;
          animasi: bintang Terapung 100s -200s linear kedua-duanya tidak terhingga;
}

.alam semesta:selepas {
  kandungan: "";
  bayang kotak: 37vw 78vh #fff, 17vw 69vh #FFF, 68vw 4vh 1px #FFF, 98vw 9vh 1px #FFF, 45vw 67vh #FFF, 95vw 1vh 2px 4vh 1px #FFF, 35vw 2px 1v4h, 35vw px #FFF, 54vw 5vh 1px #FFF, 22vw 29vh 1px #FFF, 39vw 71vh 1px #FFF, 11vw 11vh #FFF, 88vw 82vh #fff;
  lebar: 2px;
  ketinggian: 2px;
  jawatan: mutlak;
  jejari sempadan: 50%;
  -webkit-animasi: bintang Terapung 100s 3s linear ke belakang tak terhingga;
          animasi: bintang Terapung 100s 3s linear ke belakang tak terhingga;
}

.matahari {
  ketinggian: 200px;
  lebar: 200px;
  jejari sempadan: 50%;
  latar belakang: #cfcfd4;
  bayang kotak: 0 0 60px emas, 0 0 100px #b9a018, inset 0 5px 35px 53px #dbdbdb, inset 48px 8px 34px 25px #c4c4c4;
  kiri: calc(50% - 100px);
  atas: calc(50% - 100px);
  jawatan: mutlak;
  -webkit-animasi: sunFreakOut 5s 7.1s linear ke hadapan;
          animasi: sunFreakOut 5s 7.1s linear ke hadapan;
}

.bulan {
  ketinggian: 50px;
  lebar: 50px;
  jejari sempadan: 50%;
  latar belakang: rgba(0, 0, 0, 0.99);
  bayang kotak: masukkan 5px 1px 10px -8px #d4d4d6;
  -webkit-peralihan: 1s;
  peralihan: 1s;
  atas: calc(40% - 100px);
  jawatan: mutlak;
  indeks z: 5;
  -webkit-animasi: gerakkan 20s mudah masuk ke hadapan;
          animasi: gerakkan 20-an mudah masuk ke hadapan;
}

@-webkit-keyframes bergerak {
  0% {
    -webkit-transform: translateX(100vw);
            transform: translateX(100vw);
  }
  40%, 60% {
    atas: calc(50% - 100px);
  }
  50%, 50.5% {
    lebar: 200px;
    ketinggian: 200px;
    -webkit-transform: translateX(calc(50vw - 100px));
            transform: translateX(calc(50vw - 100px));
    bayang kotak: masukkan 20px 1px 35px -15px #d4d4d6;
    atas: calc(50% - 100px);
  }
  60% {
    bayang kotak: inset -20px 1px 35px -15px #d4d4d6;
  }
  100% {
    lebar: 50px;
    ketinggian: 50px;
    -webkit-transform: translateX(calc(-1vw - 60px));
            transform: translateX(calc(-1vw - 60px));
    atas: calc(40% - 100px);
    bayang kotak: inset -5px 1px 10px -8px #d4d4d6;
  }
}

@keyframes bergerak {
  0% {
    -webkit-transform: translateX(100vw);
            transform: translateX(100vw);
  }
  40%, 60% {
    atas: calc(50% - 100px);
  }
  50%, 50.5% {
    lebar: 200px;
    ketinggian: 200px;
    -webkit-transform: translateX(calc(50vw - 100px));
            transform: translateX(calc(50vw - 100px));
    bayang kotak: masukkan 20px 1px 35px -15px #d4d4d6;
    atas: calc(50% - 100px);
  }
  60% {
    bayang kotak: inset -20px 1px 35px -15px #d4d4d6;
  }
  100% {
    lebar: 50px;
    ketinggian: 50px;
    -webkit-transform: translateX(calc(-1vw - 60px));
            transform: translateX(calc(-1vw - 60px));
    atas: calc(40% - 100px);
    bayang kotak: inset -5px 1px 10px -8px #d4d4d6;
  }
}
@-webkit-keyframes skyDim {
  0%, 100% {
    latar belakang: #030613;
  }
  50%, 70% {
    latar belakang: hitam;
  }
}
@keyframes skyDim {
  0%, 100% {
    latar belakang: #030613;
  }
  50%, 70% {
    latar belakang: hitam;
  }
}
@-webkit-keyframes sunFreakOut {
  0%, 100% {
    bayang kotak: 0 0 60px emas, 0 0 100px #b9a018, inset 0 5px 35px 53px #dbdbdb, inset 48px 8px 34px 25px #c4c4c4;
  }
  50%, 70% {
    bayang kotak: 0 0 50px #e30000, 0 0 0px #b91818, inset 0 5px 35px 53px #dbdbdb, inset 48px 8px 34px 25px #c4c4c4;
  }
}
@keyframes sunFreakOut {
  0%, 100% {
    bayang kotak: 0 0 60px emas, 0 0 100px #b9a018, inset 0 5px 35px 53px #dbdbdb, inset 48px 8px 34px 25px #c4c4c4;
  }
  50%, 70% {
    bayang kotak: 0 0 50px #e30000, 0 0 0px #b91818, inset 0 5px 35px 53px #dbdbdb, inset 48px 8px 34px 25px #c4c4c4;
  }
}
@-webkit-keyframes bintang Terapung {
  0% {
    kelegapan: 0;
  }
  10% {
    kelegapan: 1;
  }
  100% {
    -webkit-transform: translateY(-100vh);
            transform: translateY(-100vh);
  }
}
@keyframes stars Terapung {
  0% {
    kelegapan: 0;
  }
  10% {
    kelegapan: 1;
  }
  100% {
    -webkit-transform: translateY(-100vh);
            transform: translateY(-100vh);
  }
}
</style>
</head>

这是一款非常逼真的使用纯CSS3实现的一个天狗食月日食动画特效，当日全食时，当画特效，当日全食时，这时，这是画特效，效果很漂亮