css3的animation是个好东西，之前应景的七夕表白爱心图。(都是中午午休时候的突发奇想。)
想想，应该在很多应节场合用css玩点有意思的。
突然想到上次的月食,那就玩玩。
看了一个div的炫技网站.
画个月亮嘛，还是尝试用一个div来实现，主div做背景黑夜，before做月亮，after做挡住月亮的黑影。
用position控制位置，用animation控制动画。

CSS Code 复制内容到剪贴板 .moonback{         width :  600px ;         height :  600px ;         background-color :  #000 ;         margin : 0  auto ;            position :  relative ;         }      .moonback::before{         content :  "," ;         display :  block ;         position :  absolute ;         left :  200px ;         top :  100px ;            width :  200px ;         height :  200px ;         background-color :  #ff0 ;         border -radius:  100px ;      }      .moonback::after{         content :  " " ;         display :  block ;         position :  absolute ;         left :  26px ;         top :  0px ;            width :  200px ;         height :  200px ;         background-color :  #000 ;         border -radius:  100px ;           -webkit-animation: 8s dog linear infinite;        -moz-animation: 8s dog linear infinite;        animation: 8s dog linear infinite;      }         @-webkit-keyframes dog {        0% {            left : 27px ;           top :  0px ;        }        100% {            left :  399px ;           top :  216px ;        }      }      @-moz-keyframes dog {        0% {            left : 27px ;           top :  0px ;        }        100% {            left :  399px ;           top :  216px ;        }      }      @keyframes dog {        0% {            left : 27px ;           top :  0px ;        }        100% {            left :  399px ;           top :  216px ;        }      }  

最好body也设成背景黑，那就更好了~

等等，看不到星星的天空，缺少了幸福感。
正好偷师一下，一个div里的美队盾做法，直接用
也给个动画效果，放大缩小~

CSS Code 复制内容到剪贴板 .star{         position :  absolute ;      }      .star::before{         content :  "" ;         display :  block ;         position :  absolute ;         left :  10px ;         top :  20px ;            width :  auto ;         height :  auto ;         color :  #fff ;        -webkit-transform:scale(0.5);        -moz-transform:scale(0.5);        transform:scale(0.5);           -webkit-animation: 1s starlight linear infinite;        -moz-animation: 1s starlight linear infinite;        animation: 1s starlight linear infinite;      }      .star::after{         content :  "" ;         display :  block ;         position :  absolute ;         left :  40px ;         top :  120px ;            width :  auto ;         height :  auto ;         color :  #fff ;        -webkit-transform:scale(0.5);        -moz-transform:scale(0.5);        transform:scale(0.5);           -webkit-animation: 2s starlight linear infinite;        -moz-animation: 2s starlight linear infinite;        animation: 2s starlight linear infinite;      }         @-webkit-keyframes starlight {        0% {           -webkit-transform:scale(0.5);        }        100% {           -webkit-transform:scale(0.1);        }      }      @-moz-keyframes starlight {        0% {           -moz-transform:scale(0.5);        }        100% {           -moz-transform:scale(0.1);        }      }      @keyframes starlight {        0% {           transform:scale(0.5);        }        100% {           transform:scale(0.1);        }      }  

 效果图如下：

 效果页面>>

完毕，嗯，再给月亮加个颜色渐变？