<頭>
<元字符集=“utf-8”>


<風(fēng)格>
html, 正文 {
? 寬度：100%；
? 溢出-x：隱藏；
}

*, *:之前, *:之后 {
? 框大?。哼吙蚩颍?br /> ? 邊距：0；
? 填充：0;
}

。宇宙 {＃＃＃ ? 寬度：100vw；
? 高度：100vh；
? 背景：#030613;
? 顯示：塊；
? 位置：相對(duì)；
? -webkit-animation：skyDim 4s 8s 線(xiàn)性向前；
? ? ? ? ? 動(dòng)畫(huà)：skyDim 4s 8s 線(xiàn)性向前；
}

.universe:在{
之前 ? 內(nèi)容： ””;＃＃＃ ? 框陰影：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；
? 位置：絕對(duì)；
? 邊界半徑：50%；
? -webkit-animation: starsFloating 100s -200s 線(xiàn)性既無(wú)限;
? ? ? ? ? 動(dòng)畫(huà)：星星浮動(dòng)100s -200s 線(xiàn)性既無(wú)限；
}

.universe:{
之后 ? 內(nèi)容： ””;＃＃＃ ? 框陰影：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像素#FFF，54vw 5vh 1px #FFF, 22vw 29vh 1px #FFF, 39vw 71vh 1px #FFF, 11vw 11vh #FFF, 88vw 82vh #fff;
? 寬度：2px；
? 高度：2px；
? 位置：絕對(duì)；
? 邊界半徑：50%；
? -webkit-animation: starsFloating 100s 3s 線(xiàn)性向后無(wú)限;
? ? ? ? ? 動(dòng)畫(huà)：starsFloating 100s 3s 線(xiàn)性向后無(wú)限；
}

。太陽(yáng) {＃＃＃ ? 高度：200px；
? 寬度：200px；
? 邊界半徑：50%；
? 背景：#cfcfd4;
? 框陰影：0 0 60px 金色，0 0 100px #b9a018，插圖 0 5px 35px 53px #dbdbdb，插圖 48px 8px 34px 25px #c4c4c4;
? 左：計(jì)算(50% - 100px);
? 頂部：計(jì)算(50% - 100px);
? 位置：絕對(duì)；
? -webkit-animation：sunFreakOut 5s 7.1s 線(xiàn)性前進(jìn)；
? ? ? ? ? 動(dòng)畫(huà)：sunFreakOut 5s 7.1s 線(xiàn)性前進(jìn)；
}

。月亮 {＃＃＃ ? 高度：50px；
? 寬度：50px；
? 邊界半徑：50%；
? 背景：rgba(0,0,0,0.99);
? 框陰影：插圖 5px 1px 10px -8px #d4d4d6;
? -webkit-transition: 1s;
? 轉(zhuǎn)換：1s；
? 頂部：計(jì)算(40% - 100px);
? 位置：絕對(duì)；
? z 索引：5；
? -webkit-animation：向前移動(dòng) 20 秒的緩入緩出；
? ? ? ? ? 動(dòng)畫(huà)：向前移動(dòng) 20 秒緩入緩出；
}

@-webkit-keyframes 移動(dòng) {
? 0% {
# ? ? -webkit-transform：translateX(100vw);
? ? ? ? ? ? 變換：translateX(100vw);
? }
? 40%, 60% {
? ? 頂部：計(jì)算(50% - 100px);
? }
? 50%, 50.5% {
? ? 寬度：200px；
? ? 高度：200px；
? ? -webkit-transform：translateX(calc(50vw - 100px));
? ? ? ? ? ? 變換：translateX(calc(50vw - 100px));
? ? 框陰影：插圖 20px 1px 35px -15px #d4d4d6;
? ? 頂部：計(jì)算(50% - 100px);
? }
? 60% {
# ? ? 框陰影：插圖 -20px 1px 35px -15px #d4d4d6;
? }
? 100% {
# ? ? 寬度：50px；
? ? 高度：50px；
? ? -webkit-transform：translateX(calc(-1vw - 60px));
? ? ? ? ? ? 變換：translateX(calc(-1vw - 60px));
? ? 頂部：計(jì)算(40% - 100px);
? ? 框陰影：插入 -5px 1px 10px -8px #d4d4d6;
? }
}

@關(guān)鍵幀移動(dòng){
? 0% {
# ? ? -webkit-transform：translateX(100vw);
? ? ? ? ? ? 變換：translateX(100vw);
? }
? 40%, 60% {
? ? 頂部：計(jì)算(50% - 100px);
? }
? 50%, 50.5% {
? ? 寬度：200px；
? ? 高度：200px；
? ? -webkit-transform：translateX(calc(50vw - 100px));
? ? ? ? ? ? 變換：translateX(calc(50vw - 100px));
? ? 框陰影：插圖 20px 1px 35px -15px #d4d4d6;
? ? 頂部：計(jì)算(50% - 100px);
? }
? 60% {
# ? ? 框陰影：插圖 -20px 1px 35px -15px #d4d4d6;
? }
? 100% {
# ? ? 寬度：50px；
? ? 高度：50px；
? ? -webkit-transform：translateX(calc(-1vw - 60px));
? ? ? ? ? ? 變換：translateX(calc(-1vw - 60px));
? ? 頂部：計(jì)算(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 starFloating {
? 0% {
# ? ? 不透明度：0；
? }
? 10% {
# ? ? 不透明度：1；
? }
? 100% {
# ? ? -webkit-transform: 翻譯Y(-100vh);
? ? ? ? ? ? 變換：translateY(-100vh);
? }
}
@keyframes starFloating {
? 0% {
# ? ? 不透明度：0；
? }
? 10% {
# ? ? 不透明度：1；
? }
? 100% {
# ? ? -webkit-transform: 翻譯Y(-100vh);
? ? ? ? ? ? 變換：translateY(-100vh);
? }
}
</風(fēng)格>
</頭>

這是一款非常新穎的使用純CSS3實(shí)現(xiàn)的一個(gè)天狗食月日食動(dòng)畫(huà)效果，當(dāng)日全食時(shí)，還有背景星星閃爍動(dòng)畫(huà)效果，效果很漂亮