用纯css3画一个小黄人并实现动画效果

2017-4-26 10:32 来自本站原创 23,601 15 3
[摘要]

本文用纯css3画出一个动态的小黄人页面,代码简洁高效,是一个非常实用的CSS3学习案例。

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

用纯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

本文最后更新于2017年4月26日,已超过 1 年没有更新,如果文章内容或图片资源失效,请留言反馈,我们会及时处理,谢谢!

如果认为本文对您有所帮助请赞助本站

支付宝扫一扫赞助微信扫一扫赞助

  • 支付宝扫一扫赞助
  • 微信扫一扫赞助
  • 声明:凡注明“本站原创”的所有文字图片等资料,版权均属 雅兮网 所有,欢迎转载,但务请注明出处;
    目前评论:15   其中:访客  12   博主  3
    加载中...
    1. 1年前 (2017-08-13) 12楼

      学习了

    2. 1年前 (2017-07-31) 11楼

      这个厉害,CSS3很强大。

    1 2
    发表评论

    疑问 调皮 难过 抠鼻 吓 微笑 可爱 坏笑 惊讶 发呆 疑问 大兵 偷笑 咒骂 发怒 白眼 鼓掌 得意 擦汗 亲亲 大哭 呲牙 晕 强

    15 3 23,601
    Top
    2018天猫双十一超级红包