今天我們來(lái)學(xué)習(xí)如何使用 CSS 畫一架飛機(jī),讓我們一步步來(lái)!
/* 首先,我們需要一個(gè)容器 */
div.airplane {
position: relative;
width: 400px;
height: 300px;
}
/* 接下來(lái),我們畫飛機(jī)的身體 */
div.airplane .body {
position: absolute;
top: 150px;
left: 50px;
width: 300px;
height: 50px;
border-radius: 25px;
background-color: #c3c3c3;
transform: rotate(30deg);
}
/* 然后,我們畫飛機(jī)的機(jī)翼 */
div.airplane .wing {
position: absolute;
top: 100px;
left: 175px;
width: 200px;
height: 20px;
background-color: #c3c3c3;
transform: rotate(-30deg);
}
/* 再接著,我們畫飛機(jī)的頭部 */
div.airplane .head {
position: absolute;
top: 135px;
left: 310px;
width: 50px;
height: 50px;
border-radius: 25px;
background-color: #c3c3c3;
transform: rotate(-30deg);
}
/* 最后,我們畫飛機(jī)的尾翼和舵 */
div.airplane .tail {
position: absolute;
top: 130px;
left: 20px;
width: 50px;
height: 100px;
border-radius: 25px;
background-color: #c3c3c3;
transform: rotate(30deg);
}
div.airplane .rudder {
position: absolute;
top: 180px;
left: 15px;
width: 10px;
height: 50px;
background-color: #c3c3c3;
transform: rotate(30deg);
}
通過(guò)以上代碼,我們就完成了使用 CSS 畫一架簡(jiǎn)單的飛機(jī)。當(dāng)然,如果您有更好的想法和創(chuàng)意,也可以進(jìn)行自由發(fā)揮和調(diào)整。