畫個月食css

css3的animation是個好東西，以前應景的七夕表白愛心圖。(都是中午午休時候的突發奇想。)
想一想，應該在不少應節場合用css玩點有意思的。
忽然想到上次的月食,那就玩玩。
看了一個div的炫技網站.
畫個月亮嘛，仍是嘗試用一個div來實現，主div作背景黑夜，before作月亮，after作擋住月亮的黑影。
用position控制位置，用animation控制動畫。

.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裏的美隊盾作法，直接用★
也給個動畫效果，放大縮小~

.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);
    }
  }

效果圖以下：

效果頁面>>

完畢，嗯，再給月亮加個顏色漸變？