纯CSS日食动画效果

又一款纯CSS日食效果，这个是地球上看到的日食效果，伴随着太阳被逐渐遮挡，有一个渐变的背景色变化效果。

分类：css3 > 动画效果难易：初级

查看演示下载资源下载积分： 20 积分

页面的head部分，设置好页面元素的样式，这里主要用了CSS3的animation动画，代码如下：

body {
  background: #82B1FF;
  -webkit-animation: dayAndNight 6s linear infinite;
          animation: dayAndNight 6s linear infinite;
}

.eclipse {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  width: 100px;
  height: 100px;
  border-radius: 50%;
}
.eclipse.sun {
  z-index: 0;
  background-color: #FFAD00;
  -webkit-animation: shadow 6s linear infinite;
          animation: shadow 6s linear infinite;
}
.eclipse.moon {
  z-index: 1;
  -webkit-animation: eclipse 6s linear infinite;
          animation: eclipse 6s linear infinite;
}

@-webkit-keyframes eclipse {
  0% {
    left: 250px;
    background-color: #82B1FF;
  }
  45%, 60% {
    left: 0;
    background-color: #04101C;
  }
  100% {
    left: -250px;
    background-color: #82B1FF;
  }
}

@keyframes eclipse {
  0% {
    left: 250px;
    background-color: #82B1FF;
  }
  45%, 60% {
    left: 0;
    background-color: #04101C;
  }
  100% {
    left: -250px;
    background-color: #82B1FF;
  }
}
@-webkit-keyframes dayAndNight {
  0%, 100% {
    background-color: #82B1FF;
  }
  45%, 60% {
    background-color: #04101C;
  }
}
@keyframes dayAndNight {
  0%, 100% {
    background-color: #82B1FF;
  }
  45%, 60% {
    background-color: #04101C;
  }
}
@-webkit-keyframes shadow {
  50% {
    box-shadow: 0px 0px 10px 5px #FFAD00;
  }
}
@keyframes shadow {
  50% {
    box-shadow: 0px 0px 10px 5px #FFAD00;
  }
}

页面的body部分，设置好太阳和月亮的div容器，代码如下：

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