首页 网页制作网络编程脚本专栏数据库网站运营网络安全平面设计CMS教程

使用HTML和CSS3绘制基本卡通图案的示例分享

所属分类： 网页制作 / CSS 阅读数： 1704
收藏 0 赞 0 分享

纯HTML+CSS实现阿童木头像
先上最终效果图：
2015116112152118.png (400×400)

在里面主要用的了CSS中的几个属性：position—定位；border-radius—圆角；box-shadow—阴 影；background（linear-gradient）—渐变；transform—旋转和变换；animation —动画，技术点不是很多，主要是细心和耐心。还是直接上最终源码吧。由于考虑浏览器的CSS兼容性，代码比较多。

CSS Code复制内容到剪贴板
  1. <!DOCTYPE html>    
  2. <html xmlns="http://www.w3.org/1999/xhtml">    
  3. <head>    
  4.     <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />    
  5.     <title>纯CSS漫画</title>    
  6.     <style type="text/css">    
  7.         * {    
  8.             margin: 0;    
  9.             padding: 0;    
  10.         }    
  11.     
  12.         .outer-circle {    
  13.             position: absolute;    
  14.             top: 32px;    
  15.             left: 44px;    
  16.             width: 289px;    
  17.             height: 289px;    
  18.             border: 4px solid #75BD4F;    
  19.             -moz-border-radius: 50%;    
  20.             -webkit-border-radius: 50%;    
  21.             border-radius: 50%;    
  22.         }    
  23.     
  24.         .inner-circle {    
  25.             position: relative;    
  26.             width: 269px;    
  27.             height: 269px;    
  28.             border: 10px solid #F5F910;    
  29.             -moz-border-radius: 50%;    
  30.             -webkit-border-radius: 50%;    
  31.             border-radius: 50%;    
  32.             background-color: #73BF43;    
  33.         }    
  34.     
  35.         .inner-circle div {    
  36.             position: absolute;    
  37.         }    
  38.     
  39.         .inner-circle-light {    
  40.             top: 41px;    
  41.             left: 35px;    
  42.             -moz-box-shadow: 26px 26px 29px 37px #fff;    
  43.             -webkit-box-shadow: 26px 26px 29px 37px #fff;    
  44.             box-shadow: 26px 26px 29px 37px #fff;    
  45.         }    
  46.     
  47.         .header-top {    
  48.             top: 11px;    
  49.             rightright: 2px;    
  50.             z-index: 100;    
  51.             width: 180px;    
  52.             height: 90px;    
  53.             -moz-border-radius: 90px 90px 0 0;    
  54.             -webkit-border-radius: 90px 90px 0 0;    
  55.             border-radius: 90px 90px 0 0;    
  56.             background-color: #000;    
  57.             -moz-transform: rotate(32deg);    
  58.             -ms-transform: rotate(32deg);    
  59.             -o-transform: rotate(32deg);    
  60.             -webkit-transform: rotate(32deg);    
  61.             transform: rotate(32deg);    
  62.         }    
  63.     
  64.         .header-left {    
  65.             top: -20px;    
  66.             left: 37px;    
  67.             width: 114px;    
  68.             height: 228px;    
  69.             -moz-border-radius: 228px 0 0 228px;    
  70.             -webkit-border-radius: 228px 0 0 228px;    
  71.             border-radius: 228px 0 0 228px;    
  72.             background-color: #000;    
  73.             -moz-transform: rotate(26deg);    
  74.             -ms-transform: rotate(26deg);    
  75.             -o-transform: rotate(26deg);    
  76.             -webkit-transform: rotate(26deg);    
  77.             transform: rotate(26deg);    
  78.         }    
  79.     
  80.         .hair-left-1 {    
  81.             top: 15px;    
  82.             left: 53px;    
  83.             z-index: 55;    
  84.             width: 85px;    
  85.             height: 23px;    
  86.             -webkit-border-top-left-radius: 30px 180px;    
  87.             border-top-left-radius: 30px 180px;    
  88.             -webkit-border-bottom-left-radius: 30px 80px;    
  89.             border-bottom-left-radius: 30px 80px;    
  90.             background-color: #000;    
  91.             -moz-transform: rotate(-74deg) skew(-42deg, 23deg);    
  92.             -ms-transform: rotate(-74deg) skew(-42deg, 23deg);    
  93.             -o-transform: rotate(-74deg) skew(-42deg, 23deg);    
  94.             -webkit-transform: rotate(-74deg) skew(-42deg, 23deg);    
  95.             transform: rotate(-74deg) skew(-42deg, 23deg);    
  96.         }    
  97.     
  98.         .hair-left-2 {    
  99.             top: -20px;    
  100.             left: 99px;    
  101.             z-index: 60;    
  102.             width: 49px;    
  103.             height: 37px;    
  104.             background-color: #000;    
  105.             -moz-transform: rotate(-51deg) skew(-43deg, 0deg);    
  106.             -ms-transform: rotate(-51deg) skew(-43deg, 0deg);    
  107.             -o-transform: rotate(-51deg) skew(-43deg, 0deg);    
  108.             -webkit-transform: rotate(-51deg) skew(-43deg, 0deg);    
  109.             transform: rotate(-51deg) skew(-43deg, 0deg);    
  110.         }    
  111.     
  112.         .hair-rightright-1 {    
  113.             top: 70px;    
  114.             rightright: 1px;    
  115.             z-index: 60;    
  116.             width: 81px;    
  117.             height: 85px;    
  118.             -webkit-border-top-rightright-radius: 26px 120px;    
  119.             border-top-rightright-radius: 26px 120px;    
  120.             background-color: black;    
  121.             -moz-transform: rotate(1deg) skew(-51deg, 0deg);    
  122.             -ms-transform: rotate(1deg) skew(-51deg, 0deg);    
  123.             -o-transform: rotate(1deg) skew(-51deg, 0deg);    
  124.             -webkit-transform: rotate(1deg) skew(-51deg, 0deg);    
  125.             transform: rotate(1deg) skew(-51deg, 0deg);    
  126.         }    
  127.     
  128.         .hair-rightright-2 {    
  129.             width: 60px;    
  130.             height: 10px;    
  131.             -webkit-border-bottom-left-radius: 100%;    
  132.             border-bottom-left-radius: 100%;    
  133.             background-color: rgba(0,0,0,0.2);    
  134.         }    
  135.     
  136.         .hair-light-1 {    
  137.             top: 30px;    
  138.             rightright: 45px;    
  139.             z-index: 105;    
  140.             width: 57px;    
  141.             height: 17px;    
  142.             -moz-border-radius: 100%;    
  143.             -webkit-border-radius: 100%;    
  144.             border-radius: 100%;    
  145.             background-color: white;    
  146.             -moz-transform: rotate(39deg);    
  147.             -ms-transform: rotate(39deg);    
  148.             -o-transform: rotate(39deg);    
  149.             -webkit-transform: rotate(39deg);    
  150.             transform: rotate(39deg);    
  151.         }    
  152.     
  153.         .hair-light-1-over {    
  154.             top: 32px;    
  155.             rightright: 38px;    
  156.             z-index: 105;    
  157.             width: 83px;    
  158.             height: 21px;    
  159.             -moz-border-radius: 100%;    
  160.             -webkit-border-radius: 100%;    
  161.             border-radius: 100%;    
  162.             background-color: black;    
  163.             -moz-transform: rotate(41deg);    
  164.             -ms-transform: rotate(41deg);    
  165.             -o-transform: rotate(41deg);    
  166.             -webkit-transform: rotate(41deg);    
  167.             transform: rotate(41deg);    
  168.         }    
  169.     
  170.         .hair-light-2 {    
  171.             top: 16px;    
  172.             rightright: 104px;    
  173.             z-index: 105;    
  174.             width: 4px;    
  175.             height: 2px;    
  176.             -moz-border-radius: 2px;    
  177.             -webkit-border-radius: 2px;    
  178.             border-radius: 2px;    
  179.             background-color: white;    
  180.             -moz-transform: rotate(10deg);    
  181.             -ms-transform: rotate(10deg);    
  182.             -o-transform: rotate(10deg);    
  183.             -webkit-transform: rotate(10deg);    
  184.             transform: rotate(10deg);    
  185.         }    
  186.     
  187.         .ear {    
  188.             top: 141px;    
  189.             rightright: 36px;    
  190.             z-index: 110;    
  191.             width: 49px;    
  192.             height: 48px;    
  193.             border: 2px solid #000;    
  194.             border-bottom-width: 1px;    
  195.             -moz-border-radius: 50%;    
  196.             -webkit-border-radius: 50%;    
  197.             border-radius: 50%;    
  198.             background-color: #F6C6B0;    
  199.             -moz-box-shadow: -4px 0 0 0 #de9876 inset;    
  200.             -webkit-box-shadow: -4px 0 0 0 #de9876 inset;    
  201.             box-shadow: -4px 0 0 0 #de9876 inset;    
  202.             -moz-transform: rotate(56deg) scaleY(1.4);    
  203.             -ms-transform: rotate(56deg) scaleY(1.4);    
  204.             -o-transform: rotate(56deg) scaleY(1.4);    
  205.             -webkit-transform: rotate(56deg) scaleY(1.4);    
  206.             transform: rotate(56deg) scaleY(1.4);    
  207.         }    
  208.     
  209.         .ear-inner-1 {    
  210.             top: 22px;    
  211.             left: 22px;    
  212.             z-index: 70;    
  213.             width: 9px;    
  214.             height: 5px;    
  215.             border-top: 1px solid #110b00;    
  216.             -moz-border-radius: 50%;    
  217.             -webkit-border-radius: 50%;    
  218.             border-radius: 50%;    
  219.             -moz-transform: rotate(-6deg);    
  220.             -ms-transform: rotate(-6deg);    
  221.             -o-transform: rotate(-6deg);    
  222.             -webkit-transform: rotate(-6deg);    
  223.             transform: rotate(-6deg);    
  224.         }    
  225.     
  226.         .ear-inner-2 {    
  227.             top: 19px;    
  228.             left: 18px;    
  229.             width: 14px;    
  230.             height: 7px;    
  231.             border-top: 2px solid #110b00;    
  232.             -moz-border-radius: 50%;    
  233.             -webkit-border-radius: 50%;    
  234.             border-radius: 50%;    
  235.             -moz-box-shadow: 0px 2px 0 0 #de9876 inset;    
  236.             -webkit-box-shadow: 0px 2px 0 0 #de9876 inset;    
  237.             box-shadow: 0px 2px 0 0 #de9876 inset;    
  238.             -moz-transform: rotate(-91deg);    
  239.             -ms-transform: rotate(-91deg);    
  240.             -o-transform: rotate(-91deg);    
  241.             -webkit-transform: rotate(-91deg);    
  242.             transform: rotate(-91deg);    
  243.         }    
  244.     
  245.         .ear-light {    
  246.             top: 21px;    
  247.             rightright: 34px;    
  248.             z-index: 105;    
  249.             width: 17px;    
  250.             height: 6px;    
  251.             -moz-border-radius: 100%;    
  252.             -webkit-border-radius: 100%;    
  253.             border-radius: 100%;    
  254.             background-color: #FFF;    
  255.             -moz-transform: rotate(89deg);    
  256.             -ms-transform: rotate(89deg);    
  257.             -o-transform: rotate(89deg);    
  258.             -webkit-transform: rotate(89deg);    
  259.             transform: rotate(89deg);    
  260.         }    
  261.     
  262.         .ear-over {    
  263.             bottombottom: -44px;    
  264.             left: -33px;    
  265.             z-index: 55;    
  266.             width: 69px;    
  267.             height: 59px;    
  268.             -moz-border-radius: 50%;    
  269.             -webkit-border-radius: 50%;    
  270.             border-radius: 50%;    
  271.             background-color: #f6c6b0;    
  272.             -moz-transform: rotate(26deg);    
  273.             -ms-transform: rotate(26deg);    
  274.             -o-transform: rotate(26deg);    
  275.             -webkit-transform: rotate(26deg);    
  276.             transform: rotate(26deg);    
  277.         }    
  278.     
  279.         .face-main {    
  280.             top: 30px;    
  281.             left: 35px;    
  282.             z-index: 50;    
  283.             width: 180px;    
  284.             height: 188px;    
  285.             -moz-border-radius: 90px;    
  286.             -webkit-border-radius: 90px;    
  287.             border-radius: 90px;    
  288.             background-color: #F6C6B0;    
  289.             -moz-box-shadow: 3px -3px 0 0 #fff inset;    
  290.             -webkit-box-shadow: 3px -3px 0 0 #fff inset;    
  291.             box-shadow: 3px -3px 0 0 #fff inset;    
  292.         }    
  293.     
  294.         .face-top {    
  295.             top: 61px;    
  296.             rightright: 75px;    
  297.             z-index: 105;    
  298.             width: 111px;    
  299.             height: 46px;    
  300.             -moz-border-radius: 50% 50% 26px 0;    
  301.             -webkit-border-radius: 50% 50% 26px 0;    
  302.             border-radius: 50% 50% 26px 0;    
  303.             background-color: #f6c6b0;    
  304.             -moz-transform: rotate(37deg);    
  305.             -ms-transform: rotate(37deg);    
  306.             -o-transform: rotate(37deg);    
  307.             -webkit-transform: rotate(37deg);    
  308.             transform: rotate(37deg);    
  309.         }    
  310.     
  311.         .face-rightright-1 {    
  312.             top: 115px;    
  313.             rightright: 71px;    
  314.             z-index: 105;    
  315.             width: 68px;    
  316.             height: 62px;    
  317.             -moz-border-radius: 100% 0 0;    
  318.             -webkit-border-radius: 100% 0 0;    
  319.             border-radius: 100% 0 0;    
  320.             background-color: #f6c6b0;    
  321.             -moz-transform: rotate(99deg);    
  322.             -ms-transform: rotate(99deg);    
  323.             -o-transform: rotate(99deg);    
  324.             -webkit-transform: rotate(99deg);    
  325.             transform: rotate(99deg);    
  326.         }    
  327.     
  328.         .face-bottombottom-1 {    
  329.             bottombottom: 42px;    
  330.             left: 45px;    
  331.             z-index: 40;    
  332.             width: 72px;    
  333.             height: 52px;    
  334.             -webkit-border-bottom-left-radius: 
更多精彩内容其他人还在看

2013年五大主流浏览器 HTML5 与 CSS3 兼容性大比拼

这篇文章主要介绍了2013年五大主流浏览器 HTML5 和 CSS3 兼容性大比拼,需要的朋友可以参考下
收藏 0 赞 0 分享

前端设计师需要了解的9个问题

这篇文章主要介绍了前端设计师需要了解的9个问题以及注意事项，非常的实用，是篇非常不错的文章，这里推荐给大家
收藏 0 赞 0 分享

CSS强制性换行的方法区别详解

自动换行问题,正常字符的换行是比较合理的,而连续的数字和英文字符常常将容器撑大,挺让人头疼,下面介绍的是CSS如何实现换行的方法对于div,p等块级元素正常文字的换行(亚洲文字和非亚洲文字)元素拥有默认的white-space:normal,当定义的宽度之后自动换行
收藏 0 赞 0 分享

CSS语义化命名方式及常用命名规则

本文搜集了一些CSS语义化命名方式以及命名规则。如有错误或不妥之处，敬请指出，欢迎你提出更好的建议，加插更多的命名规范。
收藏 0 赞 0 分享

ul li内容宽度的问题的解决方案

在IE6下只要我设置LI的宽度为auto，不论LI里面的内容多长，LI的宽度始终是100%，即UL的宽度(这里我已经写死了UL的宽度)。设置max-width也没用。高手们，在IE系列浏览器中如何使LI的宽度真正的随着内容增长而增长呢？像FF那样。
收藏 0 赞 0 分享

html5+css3气泡组件的实现

本文是html5+css3系列教程的第一篇，给大家讲述html5+css3实现气泡组件，讲解的十分的详细，这里推荐给大家，希望对大家能有所帮助
收藏 0 赞 0 分享

html5+css3之CSS中的布局与Header的实现

本文从CSS3的布局（CSS的布局的演化、CSS3盒模型-box-sizing、float布局中的bfc、Flexbox简介）Header布局的实现（float实现布局、Header js的实现）向我们展示了HTML5与CSS3的魅力。
收藏 0 赞 0 分享

一款恶搞头像特效的制作过程 利用css3和jquery

今天给大家介绍一款恶搞头像特效的制作过程，你可以把任意一张照片放到跳舞的漫画中，为他带上不同的帽子，让他翩翩起舞，下面我们一起来看一下制作过程和效果
收藏 0 赞 0 分享

大图片根据分辨率自适应宽度仍居中显示

一个1920*900的大图，在1024*768的分辨率下仍居中显示，如何做到这一点，下面是一个可行的解决方案
收藏 0 赞 0 分享

CSS3提交意见输入框样式代码

这个提交意见输入框，结构使用到了table，样式用的css3，包含了多方面的知识，比较适合新手朋友们
收藏 0 赞 0 分享
查看更多

网络赚钱

更多

站长故事

更多
建站极客
合作伙伴
在线工具
建站极客移动版
聚合全网技术文章，根据你的阅读喜好进行个性推荐
© 2012 - 2020 www.zhanzhang360.cn Some Rights Reserved.
沪ICP备13040166号-22