企鵝是一種特別可愛的生物,現在我們來試著用CSS來畫一只企鵝吧!
.penguin { position: relative; width: 300px; height: 200px; } .body { position: absolute; bottom: 0; left: 50%; transform: translate(-50%, 0%); border-radius: 50% 50% 45% 45%; width: 100px; height: 100px; background-color: #eee; } .belly { position: absolute; bottom: 0; left: 50%; transform: translate(-50%, 0%); border-radius: 50%; width: 80px; height: 80px; background-color: white; } .right-arm, .left-arm { position: absolute; bottom: -20px; width: 60px; height: 20px; background-color: #eee; border-radius: 0px 0px 20px 20px; } .right-arm { transform: rotate(45deg); right: 70px; } .left-arm { transform: rotate(-45deg); left: 70px; } .right-cheek, .left-cheek { position: absolute; bottom: 0px; width: 40px; height: 30px; background-color: #ffc0cb; border-radius: 50%; } .right-cheek { right: 130px; } .left-cheek { left: 130px; } .right-eye, .left-eye { position: absolute; width: 30px; height: 30px; background-color: black; border-radius: 50%; } .right-eye { right: 90px; bottom: 60px; } .left-eye { left: 90px; bottom: 60px; } .right-wing, .left-wing { position: absolute; width: 100px; height: 60px; background-color: #eee; border-radius: 0px 60px 60px 0px; transform: rotate(-45deg); } .right-wing { right: -15px; bottom: 30px; } .left-wing { left: -15px; bottom: 30px; } .beak-top, .beak-bottom { position: absolute; width: 36px; height: 20px; background-color: #ffc0cb; transform: rotate(-45deg); } .beak-top { top: 55px; left: 50%; transform: rotate(-45deg) translate(-50%, -50%); border-top-left-radius: 30px; border-top-right-radius: 30px; } .beak-bottom { top: 67px; left: 50%; transform: rotate(-45deg) translate(-50%, -50%); border-bottom-left-radius: 30px; border-bottom-right-radius: 30px; }
以上就是CSS畫企鵝的代碼了,你可以將這段代碼復制到你的編輯器中運行看看效果哦!