• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号
登陆 注册

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

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

纯HTML+CSS实现阿童木头像
先上最终效果图：

在里面主要用的了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: 70px 40px;    
  335.             -webkit-border-top-left-radius: 14px 11px;    

鲜花
握手
雷人
路过
鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
More+
上一篇：
12个CSS高级技巧汇总发布时间：2022-06-21
下一篇：
一波CSS高级实用技巧小结发布时间：2022-06-21
热门推荐
More+
热门话题
More+
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服（服务时间 9:00～18:00）

在线QQ客服
地址：深圳市南山区西丽大学城创智工业园
电邮：jeky_zhao#qq.com
移动电话：139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap