CSS3是HTML和CSS的擴展版本，它提供了更多的樣式和效果。今天，我們將使用CSS3來制作一個漂亮的月亮。

/*創建一個div元素*/
div {
width: 120px;
height: 120px;
background: #f5deb3;
border-radius: 50%;
position: relative;
overflow: hidden;
}
/*制作月亮的陰影*/
div::before {
content: "";
position: absolute;
width: 100%;
height: 100%;
background: #f5deb3;
border-radius: 50%;
top: 0;
left: 0;
box-shadow: 20px 0 0 #f5deb3, -20px 0 0 #f5deb3, 0 20px 0 #ffffff, 0 -20px 0 #ffffff;
}
/*制作月亮的眼睛*/
div::after {
content: "";
position: absolute;
width: 20px;
height: 20px;
background: #ffffff;
border-radius: 50%;
top: 30px;
left: 25px;
}
/*讓月亮更真實*/
div::before,
div::after {
transform: translate(-50%, -50%);
transition: all 0.5s ease-in-out;
}
/*制作月亮懸浮的動畫*/
div:hover::before {
box-shadow: 50px 0 0 #f5deb3, -50px 0 0 #f5deb3, 0 50px 0 #ffffff, 0 -50px 0 #ffffff;
transform: scale(1.2);
}
div:hover::after {
top: 40px;
left: 35px;
}

以上代碼中，我們首先創建了一個正圓形的div元素，并將其置于相對定位。然后，通過在偽元素中使用CSS的box-shadow屬性和before和after屬性來創建月亮的陰影和眼睛。最后，通過使用CSS的transform和transition屬性以及:hover選擇器來給月亮添加動畫和交互。

通過使用CSS3，我們能夠輕松地制作出獨特而美觀的設計效果，這讓網站開發者更加輕松愉悅地將自己的創造力融入到網站中。