今天主要是用 css 画一个企鹅 ~
html
<div class="penguin">
<!-- 头部 -->
<div class="penguin-top">
<!-- 脸 -->
<p class="left-beak"></p>
<p class="right-beak"></p>
<!-- 眼睛 -->
<div class="left-eye">
<p class="eyeball"></p>
</div>
<div class="right-eye">
<p class="eyeball"></p>
</div>
<!-- 腮红 -->
<p class="left-blush"></p>
<p class="right-blush"></p>
<!-- 嘴巴 -->
<p class="top-mouth"></p>
<p class="bottom-mouth"></p>
</div>
<!-- 身体 -->
<p class="belly"></p>
<!-- 四肢 -->
<div class="penguin-bottom">
<!-- 手 -->
<p class="left-hand"></p>
<p class="right-hand"></p>
<!-- 脚 -->
<p class="left-foot"></p>
<p class="right-foot"></p>
</div>
</div>
* {
margin: 0;
padding: 0;
border: none;
}
body {
background-color: #C6FAF1;
}
.penguin {
width: 300px;
height: 300px;
margin: 5% auto 0;
text-align: center;
position: relative;
}
头部:
.penguin-top {
width: 160px;
height: 130px;
background-color: #000;
border-radius: 60% 55% 50% 50%;
display: inline-block;
margin-top: 20px;
}
脸部:
.left-beak {
width: 100px;
height: 95px;
background-color: #808080;
border-radius: 50%;
position: absolute;
top: 13%;
left: 25%;
z-index: 1;
}
.right-beak {
width