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

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

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

不得不说CSS3的出现让网页更加绚丽生动,以前需要用图片来实现的效果现在完全可以通过几段css来解决,也解决了图片素材在分辨率变化的时候模糊的情况。更有高手通过css3来实现一些复杂的动画效果,比如就有一位CSS3高手用纯代码画了一个小黄人,并且还有动画效果。\r\n\r\n\r\n\r\n动态的效果如下\r\n\r\n\r\n\r\n怎么样,是不是很生动,而这个样例中没有使用一张图片素材,是纯代码“画”出来的,而实际上html结构也特别的简单。\r\n

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

\r\nCSS样式就比较复杂了,由于篇幅限制,就不在文中列出,大家可以点击下面的demo,查看效果,有需要的可以直接扒下css样式。\r\n\r\ndemo\r\n\r\nweb前端入门容易,但是想做好还是需要下一番苦功夫的,本样例的css样式表中不仅包含css3属性,还有动画属性,是一个非常值得学习的案例。\r\n\r\n代码原作者:郭锦荣 http://www.cnblogs.com/jr1993/p/4658772.html

瓜分支付宝10亿红包

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

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

      学习了

    2. 7个月前 (07-31) 11楼

      这个厉害,CSS3很强大。

    1 2
    发表评论

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

    15 3 21,473
    Top