“我正在参加 码上掘金体验活动，详情：show出你的创意代码块”
一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第9天，点击查看活动详情。
前言
小黄人（Minions），出自美国动画电影《神偷奶爸》及其衍生相关作品中的角色。 介绍一下CSS实现小黄人,下面将给大家详细介绍一下整个代码的流程.
实现
小黄人身体衣服
小黄人身型是黄色胶囊状，穿着蓝色背带装。
HTML布局
<div class="minion-body">
<!-- //身体 -->
<div class="dungarees-bottom"></div>
<!-- //短裤 -->
<div class="dungarees-front"></div>
<!-- //上衣 -->
<div class="dungarees-pocket">
<!-- //logo -->
<div class="logo"><span></span></div>
</div>
<div class="dungarees-strap left">
<!-- //左边带子 -->
<div class="button"></div>
</div>
<div class="dungarees-strap right">
<!-- //右边带子 -->
<div class="button"></div>
</div>
</div>
头发
有两层头发 这里只展示部分。头发有5种类型，刺头、塌塌的小中分、冲天一小撮、光头以及小平头。
头发样式
.minion .hair {
top: -15px;
margin: 0;
padding: 0;
}
.minion .hair.back li:nth-of-type(1) {
-webkit-transform: rotate(-70deg);
transform: rotate(-70deg);
margin-top: 36px;
}
.minion .hair.back li:nth-of-type(2) {
-webkit-transform: rotate(-50deg);
transform: rotate(-50deg);
margin-top: 19px;
}
.minion .hair.back li:nth-of-type(3) {
-webkit-transform: rotate(-30deg);
transform: rotate(-30deg);
margin-top: 12px;
}
.minion .hair.back li:nth-of-type(4) {
-webkit-transform: rotate(-10deg);
transform: rotate(-10deg);
margin-top: 3px;
}
.minion .hair.back li:nth-of-type(5) {
-webkit-transform: rotate(2deg);
transform: rotate(2deg);
border-left: 1px solid #333333;
border-radius: 80% 0 0 0;
}
.minion .hair.back li:nth-of-type(6) {
-webkit-transform: rotate(10deg);
transform: rotate(10deg);
margin-top: 3px;
}
.minion .hair.back li:nth-of-type(7) {
-webkit-transform: rotate(30deg);
transform: rotate(30deg);
margin-top: 12px;
}
.minion .hair.back li:nth-of-type(8) {
-webkit-transform: rotate(50deg);
transform: rotate(50deg);
margin-top: 19px;
}
.minion .hair.back li:nth-of-type(9) {
-webkit-transform: rotate(70deg);
transform: rotate(70deg);
margin-top: 36px;
}
眼镜部分
眼睛呈单只或双只，并一直带着潜水镜。
HTML布局
<div class="goggle-strap left"></div>
<!-- //镜架左边黑线 -->
<div class="goggle-strap right"></div>
<!-- //镜架右边黑线 -->
<div class="goggle-strap-link left"></div>
<div class="goggle-strap-link right"></div>
<div class="goggle-frame left">
<!-- //镜架左边眶 -->
<div class="goggle">
<!-- //眼睛 -->
<div class="eye">
<div class="pupil">
<div class="dot"></div>
</div>
</div>
</div>
</div>
<div class="goggle-frame right">
<!-- //镜架右边眶 -->
<div class="goggle">
<!-- //眼睛 -->
<div class="eye">
<div class="pupil">
<div class="dot"></div>
</div>
</div>
</div>
</div>
<div class="goggle-shadow left"></div>
<div class="goggle-shadow right"></div>
<div class="mouth"></div>
<!-- //嘴巴 -->
总结
整篇主要用到的是css定位布局,还有小黄人的身体用到圆角的样式border-radius,阴影,旋转，渐变以上就这些内容,怎么样，是不是很像啊！
