今天一时兴起，想用css画个企鹅。
先分析一下结构，页面分为一个容器，里面包括头部、左右眼、鼻子、围巾、肚子、左右脚、左右手共10个div，代码如下:
html部分：
<div class="container"><!-- 头部 --><div class="header"></div><!-- 左眼 --><div class="eye_left"></div><!-- 右眼 --><div class="eye_right"></div><!-- 鼻子 --><div class="nose"></div><!-- 围巾 --><div class="scarf"></div><!-- 肚子 --><div class="belly"></div><!-- 左脚 --><div class="foot-left"></div><!-- 右脚 --><div class="foot-right"></div><!-- 左手 --><div class="hand-left"></div><!-- 右手 --><div class="hand-right"></div></div>
css部分:
* {margin: 0;padding: 0;}.container {margin: 100px auto;width: 400px;height: 400px;position: relative;}/* 头部区域 */.header {width: 150px;height: 150px;border-radius: 100% 100% 40% 40%;background-color: black;position: absolute;top: 135px;left: 109px;}/* 眼睛部分，采用伪元素处理方案 */.eye_left,.eye_right {height: 36px;width: 21px;background-color: white;border-radius: 50%;position: absolute;top: 158px;}.eye_left {left: 159px;}.eye_right {right: 188px;}.eye_left::after{content: "";width: 9px;height: 14px;background-color: black;border-radius: 50%;position: absolute;right: 4px;top: 16px;}.eye_right::after {content: "";width: 14px;height: 8px;border-top: 5px solid black;border-radius: 50%/50%;position: absolute;transform: rotate(-11deg);right: 3px;top: 19px;}.nose {height: 27px;width: 81px;border-radius: 90% 90% 100% 100%;background-color: rgb(224, 157, 69);position: absolute;top: 199px;left: 146px;z-index: 9;}.scarf{width: 150px;position: absolute;top: 220px;left: 109px;border-top: 40px solid red;background-color: red;border-radius: 0% 0% 23% 23%;z-index: 8;}.scarf::before{content: "";width: 150px;position: absolute;top: -48px;left: 0px;border-top: 20px solid black;background-color: black;border-radius: 0% 0% 23% 23%;}.scarf::after{content: "";height: 43PX;width: 36px;position: absolute;top: -9px;left: 33px;background-color: red;border-radius: 0% 0% 23% 23%;}.belly{width: 150px;height: 150px;border-radius:50%;background-color: black;position: absolute;top: 193px;left: 109px;}.belly::before{content: "";width: 110px;height: 130px;border-radius: 50%;background-color: white;position: absolute;top: 13px;left: 21px;}.foot-left,.foot-right{height: 27px;width: 81px;border-radius: 50% 50% 50% 50%;background-color: rgb(224, 157, 69);position: absolute;bottom: 56px;z-index: -1;}.foot-left{left: 112px;}.foot-right{left: 174px;}.hand-left,.hand-right{height: 27px;width: 81px;border-radius: 50% 50% 50% 50%;background-color: black;position: absolute;bottom: 102px;z-index: -1;}.hand-left{left: 71px;transform: rotate(-75deg);}.hand-right{left: 215px;transform: rotate(-100deg);}
最终效果展示,是不是感觉萌萌哒:
