CSS3做的日食動畫特效

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


<風格>
html，正文{
寬度：100%；
溢出-x：隱藏；
}

*, *:前, *:之後 {
框大小：邊框框；
邊距：0；
填充：0;
}

。宇宙 {＃＃＃ 寬度：100vw；
高度：100vh；
背景：#030613;
顯示：塊；
位置：相對；
-webkit-animation：skyDim 4s 8s 線性向前；
動畫：skyDim 4s 8s 線性向前；
}

.universe:在{
之前 內容： ””;＃＃＃ 框陰影：10vw 1vh #fff，14vw 29vh 2px #FFF，23vw 34vh 1px #FFF，1vw 99vh 1px #FFF，20vw 80vh #FFF，90vw 10vh FFF，20vw 80vh #FFF，90vw 10vh 2FFF，20vw 80vh #FFF，90vw 10vh 2FFwx 50vw 99vh 1px #FFF, 74vw 40vh 1px #FFF, 80vw 9vh 1px #FFF, 20vw 80vh #FFF, 85vw 78vh #fff;
寬度：4px；
高度：4px；
位置：絕對；
邊界半徑：50%；
-webkit-animation: starsFloating 100s -200s 線性既無限;
動畫：星星浮動100s -200s 線性既無限；
}

.universe:{
之後 內容： ””;＃＃＃ 框陰影：37vw 78vh #fff、17vw 69vh #FFF、68vw 4vh 1px #FFF、98vw 9vh 1px #FFF、45vw 67vh #FFF、95vw 1vhx #FFF、45vw 67vh #FFF、95vw 1vh 2px #fff、FFF3145、FFF3 2pvFffh 2pv ，54vw 5vh 1px #FFF, 22vw 29vh 1px #FFF, 39vw 71vh 1px #FFF, 11vw 11vh #FFF, 88vw 82vh #fff;
寬度：2px;
高度：2px；
位置：絕對；
邊界半徑：50%；
-webkit-animation: starsFloating 100s 3s 線性向後無限;
動畫：starsFloating 100s 3s 線性向後無限；
}

。太陽 {＃＃＃ 高度：200px；
寬度：200px；
邊界半徑：50%；
背景：#cfcfd4;
框陰影：0 0 60px 金色，0 0 100px #b9a018，插圖 0 5px 35px 53px #dbdbdb，插圖 48px 8px 34px 25px #c4c4c4;
左：計算(50% - 100px);
上方：計算(50% - 100px);
位置：絕對；
-webkit-animation：sunFreakOut 5s 7.1s 線性前進；
動畫：sunFreakOut 5s 7.1s 線性前進；
}

。月亮 {＃＃＃ 高度：50px；
寬度：50px；
邊界半徑：50%；
背景：rgba(0,0,0,0.99);
框陰影：圖 5px 1px 10px -8px #d4d4d6;
-webkit-transition: 1s;
轉換：1s；
上方：計算(40% - 100px);
位置：絕對；
z 索引：5；
-webkit-animation：向前移動 20 秒的緩緩出；
動畫：向前移動 20 秒緩入緩出；
}

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

@關鍵影格移動{
0% {
# -webkit-transform：translateX(100vw);
變換：translateX(100vw);
}
40%, 60% {
上方：計算(50% - 100px);
}
50%, 50.5% {
寬度：200px；
高度：200px；
-webkit-transform：translateX(calc(50vw - 100px));
變換：translateX(calc(50vw - 100px));
框陰影：圖 20px 1px 35px -15px #d4d4d6;
上方：計算(50% - 100px);
}
60% {
# 框陰影：插圖 -20px 1px 35px -15px #d4d4d6;
}
100% {
# 寬度：50px；
高度：50px；
-webkit-transform：translateX(calc(-1vw - 60px));
變換：translateX(calc(-1vw - 60px));
上方：計算(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);
}
}
</風格>
</頭>

這是一款非常新穎的使用純CSS3實現的一個天狗食月日食動畫效果，當日全食時，還有背景星星閃爍動畫效果，效果很漂亮