CSS小企鵝該如何畫呢?其實很簡單,只需要幾行代碼就能完成。
/* 設置畫布大小 */ .canvas { width: 200px; height: 200px; } /* 繪制小企鵝身體 */ .body { width: 120px; height: 100px; border-radius: 60px 60px 20px 20px; background-color: #E7EFFB; position: absolute; bottom: 0; left: 50%; transform: translateX(-60px); z-index: 1; } /* 繪制小企鵝的胸部 */ .belly { width: 80px; height: 60px; background-color: #FFFFFF; position: absolute; bottom: 20px; left: 50%; transform: translateX(-40px); z-index: 2; } /* 繪制小企鵝的頭部 */ .head { width: 70px; height: 70px; border-radius: 50%; background-color: #E7EFFB; position: absolute; bottom: 100px; left: 50%; transform: translateX(-35px); z-index: 3; } /* 繪制小企鵝的眼睛 */ .eye { width: 20px; height: 20px; border-radius: 50%; background-color: #3B3B3B; position: absolute; bottom: 130px; left: 50%; } /* 繪制小企鵝的嘴巴 */ .mouth { width: 40px; height: 20px; border-radius: 0 0 30px 30px; border-top: 3px solid #3B3B3B; position: absolute; bottom: 120px; left: 50%; transform: translateX(-20px); }
只需要按照上述代碼添加到你的CSS文件中并在HTML文件中使用相應的類名即可繪制出一個可愛的小企鵝。
上一篇css將列表橫過來
下一篇CSS小屏幕顯示隱藏