<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實(shí)現(xiàn)的一個(gè)天狗食月日食動畫特效，當(dāng)日全食時(shí)，當(dāng)畫特效，當(dāng)日全食時(shí)，這時(shí)，這是畫特效，效果很漂亮