要用CSS畫小豬佩琪,首先需要了解CSS的基本語(yǔ)法和屬性。使用pre標(biāo)簽可以讓代碼以原樣展示,便于閱讀。
/* 定義整個(gè)身體的樣式 */ body { background-color: #FCD1D1; } /* 然后是小豬佩琪的頭部 */ .head { width: 200px; height: 200px; background-color: #F87979; border-radius: 50%; position:relative; } /* 增加兩個(gè)耳朵 */ .ear { width: 60px; height: 60px; border-radius: 50%; background-color: #B33535; position:absolute; } .left-ear { top: -20px; left: 30px; } .right-ear { top: -20px; left: 110px; } /* 畫上眼睛 */ .eye { width: 20px; height: 20px; border-radius: 50%; background-color: white; position:absolute; } .left-eye { top: 70px; left: 60px; } .right-eye { top: 70px; left: 120px; } /* 在眼睛里畫眼珠 */ .pupil { width: 10px; height: 10px; background-color: black; border-radius: 50%; position:relative; } .left-pupil { top: 5px; left: 5px; } .right-pupil { top: 5px; left: 5px; } /* 然后是鼻子 */ .nose { width: 30px; height: 30px; background-color: #FF8282; border-radius: 50%; position:absolute; top: 100px; left: 85px; } /* 腮紅 */ .cheeks { width: 50px; height: 50px; background-color: #FFB3B3; border-radius: 50%; position:absolute; top: 120px; } .left-cheek { left: 30px; } .right-cheek { left: 120px; } /* 最后是嘴巴 */ .mouth { width: 60px; height: 30px; border-bottom-left-radius: 40%; border-bottom-right-radius: 40%; background-color: white; position:absolute; top: 130px; left: 70px; }
這樣一來(lái),就完成了小豬佩琪的畫法。根據(jù)需求可以添加其他屬性,讓小豬佩琪更加可愛~
下一篇火星人集成灶css