不得不说CSS3的出现让网页更加绚丽生动，以前需要用图片来实现的效果现在完全可以通过几段css来解决，也解决了图片素材在分辨率变化的时候模糊的情况。更有高手通过css3来实现一些复杂的动画效果，比如就有一位CSS3高手用纯代码画了一个小黄人，并且还有动画效果。

动态的效果如下

怎么样，是不是很生动，而这个样例中没有使用一张图片素材，是纯代码“画”出来的，而实际上html结构也特别的简单。

<div class="wrapper"><!-- 容器 -->
 <div class="littleH"><!-- 小黄人 -->
 <div class="bodyH"><!-- 身体 -->
 <div class="trousers"><!-- 裤子 -->
 <div class="condoleBelt"><!-- 吊带 -->
 <div class="left"></div>
 <div class="right"></div>
 </div>
 <div class="trousers_top"></div><!-- 裤子突出的矩形部分 -->
 <div class="pocket"></div><!-- 裤袋 -->
 <!-- 三条线 -->
 <span class="line_left"></span>
 <span class="line_right"></span>
 <span class="line_bottom"></span>
 </div>
 </div>
 <div class="hair"><!-- 头发 -->
 <span class="left_hair_one"></span>
 <span class="left_hair_two"></span>
 </div>
 <div class="eyes"><!-- 眼睛 -->
 <div class="leftEye"><!-- 左眼 -->
 <div class="left_blackEye">
 <div class="left_white"></div>
 </div>
 </div>
 <div class="rightEye"><!-- 右眼 -->
 <div class="right_blackEye">
 <div class="right_white"></div>
 </div>
 </div>
 </div>
 <div class="mouse"><!-- 嘴巴 -->
 <div class="mouse_shape"></div>
 </div>
 <div class="hands"><!-- 双手 -->
 <div class="leftHand"></div>
 <div class="rightHand"></div>
 </div>
 <div class="feet"><!-- 双脚 -->
 <div class="left_foot"></div>
 <div class="right_foot"></div>
 </div>
 <div class="groundShadow"></div><!-- 脚底阴影 -->
 </div>
 </div>

CSS样式就比较复杂了，由于篇幅限制，就不在文中列出，大家可以点击下面的demo，查看效果，有需要的可以直接扒下css样式。

demo

web前端入门容易，但是想做好还是需要下一番苦功夫的，本样例的css样式表中不仅包含css3属性，还有动画属性，是一个非常值得学习的案例。

代码原作者：郭锦荣 http://www.cnblogs.com/jr1993/p/4658772.html