用 CSS 做月亮并不難,只需要幾行代碼就能實現。首先,我們需要一個容器來放置月亮。
<div class="moon"></div>
接下來,我們可以使用 border-radius 屬性來把容器變成一個圓形。設置寬度和高度相等,使其成為一個圓形。
.moon {
width: 100px;
height: 100px;
border-radius: 50%;
}
然后,我們需要使用 CSS 漸變來實現月亮表面的陰影效果。
.moon {
width: 100px;
height: 100px;
border-radius: 50%;
background: radial-gradient(circle at 50% 50%, #FFF 0%, #FFF 70%, #888 70%, #888 100%);
}
最后,我們需要添加一些細節來讓月亮更加逼真。這包括添加一個圓形的陰影和調整漸變的位置。
.moon {
width: 100px;
height: 100px;
border-radius: 50%;
background: radial-gradient(circle at 50% 85%, #FFF 0%, #FFF 70%, #888 70%, #888 100%);
box-shadow: 0 0 20px 5px #FFF;
}
通過以上步驟,我們就成功地用 CSS 實現了一個逼真的月亮。
下一篇生成css3漸變動畫