學透CSS-當CSS遇到古詩和月亮，月亮動起來！！！

創作不易 拒絕白嫖 點個贊唄
關注專欄 學透CSS,帶你走進CSS的深處！！！

前言

在具體開始之前，我們先來科普一下，月亮的各種圓缺形態，也稱為月相，

“新月”，也叫“朔日”，這時是農歷初一；

“蛾眉月”，這時是農歷初三、四；

農歷初七、八，半個亮區對著地球，人們可以看到半個月亮（凸面向西），這一月相叫“上弦月”；

農歷十五、十六、十七，月球的亮區全部對著地球，我們能看到一輪圓月，這一月相稱為“滿月”，也叫“望”；

農歷二十二、二十三，又能看到半個月亮（凸面向東），這一月相叫做“下弦月”，

整體布局

黑色的背景板

html,
body {
  width: 100%;
  height: 100%;
  border-radius: 0;
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #2c2f36;
  color: white;
}

天空

.sky {
  width: 60%;
  height: 100%;
  border-radius: 15px;
  overflow: hidden;
  background: linear-gradient(#1d2b49, #1a45a0, #91cdff, #fff);
  background-size: 100% 300%;
  box-shadow: 0px 0px 30px rgb(0 0 0 / 30%);
  cursor: pointer;
  position: relative;
}

人物

小結

上面我們搭好一副古人賞月的畫面，還缺少月亮和詩詞，

殘月

            暮江吟  
            白居易
一道殘陽鋪水中， 半江瑟瑟半江紅，
可憐九月初三夜， 露似真珠月似弓，

殘月的實作是比較簡單的，首先是使用border-radius，制作一個圓，背景是黑色，然后設定一個內陰影即可

.moon {
  width: 50px;
  height: 50px;
  position: absolute;
  right: 50px;
  top: 100px;
  border-radius: 50%;
  background-color: #2c2f36;
  box-shadow: inset 10px 0px rgb(255 255 255 / 90%);

上下弦月

對于下弦月來說，最簡單的方法，

先設定黑色的背景圓

.moon-bk{
  width: 50px;
  height: 50px;
  border-radius: 50%;
  position: absolute;
  right: 50px;
  top: 100px;
  background-color: #2c2f36;
}

然后再使用z-index + border-radius設定一個白色的半圓，

.moon {
  width: 25px;
  height: 50px;
  position: absolute;
  right: 50px;
  top: 100px;
  border-radius:0px 25px 25px 0px;

  background-color: rgb(255 255 255 / 90%);
}

第二種方法：

使用clip-path制作一個圓，然后移動位置即可，

.moon {
  width: 50px;
  height: 50px;
  position: absolute;
  right: 50px;
  top: 100px;
  clip-path: circle(25px at 50px 25px);
  transform: translate(-50%, 0%);
  background: rgb(255 255 255 / 90%);
}

滿月

       望月懷遠  
        張九齡
  海上生明月，天涯共此時，
  情人怨遙夜，竟夕起相思，
  滅燭憐光滿，披衣覺露滋，
  不堪盈手贈，還寢夢佳期，

張弦月

這個乍一看比較復雜，其實也是很簡單的，主要是使用border-radius和clip-path進行制作，

.moon {
  width: 50px;
  height: 50px;
  position: absolute;
  right: 50px;
  top: 100px;
  border-radius: 50%;
  background-color: rgb(255 255 255 / 90%);
  clip-path: ellipse(25px 27px at 19px 25px ) 
} 

讓月亮動起來

上面我們只是簡單的實作了靜態的月亮的樣子，下面我們就讓他動起來，

我們的思路其實很簡單：利用CSS影片+雪碧圖，

首先準備一張雪碧圖：

然后定位7個狀態的定位:

定位如果沒有UI設計的話，是真的難找，就這幾個位置調了好久！！！

@keyframes moon-shadow {
  /*  新月*/
  0% {
    right: 10px;
    top: 200px;
    background-position: -15px -60px;
  }
  15% {
    right: 60px;
    top: 150px;
    background-position: -40px -60px;
  }
  30% {
    right: 110px;
    top: 100px;
    background-position: -80px -60px;
  }
  45% {
    right: 160px;
    top: 80px;
    background-position: -129px -60px;
  }
  60% {
    right: 210px;
    top: 100px;
    background-position: -176px -60px;
  }
  85% {
    right: 260px;
    top: 150px;
    background-position: -210px -60px;
  }
  100% {
    right: 310px;
    top: 200px;
    background-position: -250px -60px;
  }
}

呼叫影片：

background: url(./sprit2-removebg.png) no-repeat;
animation: moon-shadow 15s step-start both infinite;

最終的效果：

這里其實本來是加上古詩的變化的，特地沒放出來，實作是很簡單的，希望大家不要只看，可以試試！！！

后記

其實一種樣式或者影片，是可以有很多種CSS屬性去選擇實作的！這篇文章，其實有點屬性硬用的意味在的，很多東西可以用其他更簡單的方式實作的，為了讓大家更多的使用更方便的屬性，也只能硬用了，最后月亮動起來的效果，其實有很多方式去實作，這里就單純的介紹了雪碧圖，還是希望大家可以更多的嘗試，

PS： 特地留了一個bug，哈哈！！！希望有心人發現吧，