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 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；
  位置：绝对；
  边界半径：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 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；
  位置：绝对；
  边界半径：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实现的一个天狗食月日食动画效果，当日全食时，还有背景星星闪烁动画效果，效果很漂亮