“我正在参加 码上掘金体验活动，详情：show出你的创意代码块”

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第10天，点击查看活动详情。

前言

月食，又称月蚀，是一种当月球运行进入地球的阴影（阴影又分本影和半影两部分）时，原本可被太阳光照亮的部分，有部分或全部不能被直射阳光照亮，使得位于地球的观测者无法看到普通的月相的天文现象。月食发生时，太阳、地球、月球恰好或几乎在同一条直线上，因此月食必定发生在满月的晚上（农历十五、十六、或十七），如《说文》所说“日食则朔，月食则望”。地球阴影位于地球公转轨道面（黄道面）内，此平面与月球轨道面（白道面）并不重合，黄白道面交角约5度；大多数满月时，月球不在黄道面内，而是或偏北或偏南，不在地球阴影内，因此并不是每个满月时，都发生月食。每年全球至少发生两次月食。

介绍一下CSS实现月食变化,下面将给大家详细介绍一下整个代码的流程.

实现

布局

<div class="moon"></div>

样式

页面背景

body {
  position:relative;
  background-color:#011111;
  background-image:radial-gradient(#0d292a 0%, #011111 70%);
  background-size:100% 600px;
  background-repeat:no-repeat;
}

整体背景使用相对定位，径向渐变让夜晚显得更像那么一回事。

月亮样式

.moon {
  position:absolute;
  top:200px;
  left:50%;
  width:8rem;
  height:8rem;
  overflow:hidden;
  border-radius:50%;
  -webkit-transform:translateX(-50%);
          transform:translateX(-50%);
  -webkit-box-shadow:0 0 400px 100px #123839;
          box-shadow:0 0 400px 100px #123839;
  -webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);
}
.moon:after {
  content:'';
  position:absolute;
  top:1px;
  right:1px;
  bottom:1px;
  left:1px;
  z-index:-1;
  border-radius:50%;
  background-color:#fff5bb;
  background-image:
    radial-gradient(#f2e594 0%, #f2e594 70%, transparent 70%, transparent 100%),
    radial-gradient(#f2e594 0%, #f2e594 70%, transparent 70%, transparent 100%),
    radial-gradient(#f2e594 0%, #f2e594 70%, transparent 70%, transparent 100%),
    radial-gradient(#f2e594 0%, #f2e594 70%, transparent 70%, transparent 100%),
    radial-gradient(#f2e594 0%, #f2e594 70%, transparent 70%, transparent 100%);
  background-size:10px 10px, 5px 5px, 15px 15px, 10px 10px, 7px 7px;
  background-repeat:no-repeat;
  background-position:10% 20%, 70% 15%, 35% 70%, 80% 50%, 70% 75%;
    -webkit-box-shadow:inset -15px -15px 0 #f2e594;
            box-shadow:inset -15px -15px 0 #f2e594;
}
.moon:before {
  content:'';
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  left:0;
  z-index:222;
  background:#0b2526;
  border-radius:50%;
  -webkit-transform:translateX(-100%);
          transform:translateX(-100%);
  -webkit-animation:phase 20s infinite linear;
          animation:phase 20s infinite linear;
}
@-webkit-keyframes phase {
  0%, 100% {-webkit-transform:translateX(-100%);transform:translateX(-100%);}
  10% {-webkit-transform:translateX(-100%);transform:translateX(-100%);}
  99.999% {-webkit-transform:translateX(100%);transform:translateX(100%);}
}
@keyframes phase {
  0%, 100% {-webkit-transform:translateX(-100%);transform:translateX(-100%);}
  10% {-webkit-transform:translateX(-100%);transform:translateX(-100%);}
  99.999% {-webkit-transform:translateX(100%);transform:translateX(100%);}
}

总结

月亮主要用到的是css的@keyframes动画,绝对定位让月亮呈现在页面中间,使用transform:translateX进行平移遮盖动画看到月儿看到月亮随着时间的变化儿变化,阴影,以上这些内容组合成一个带有动画效果的月食变化,谢谢观看!

点个赞吧 球球了φ(>ω<*)