资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/【二次元的CSS】—— 用 DIV + CSS3 画Hello Kitty（详解步骤）

【二次元的CSS】—— 用 DIV + CSS3 画Hello Kitty（详解步骤）

wean / 2740人阅读

摘要：原本自己也想画，正巧看到一位外国友人她的个人网站。也用相同的方法画了。且细节相当到位。在此我也分享一下。第三步蝴蝶结第四步身体经过前几次的学习之后，画身体应该没什么难度了吧，都是用各种形状的圆组成的。收工欢迎大家吐槽

原本自己也想画Hello Kitty，正巧看到一位外国友人Lauren McConachie（她的个人网站： http://lorenai.com。）也用相同的方法画了。 且细节相当到位。在此我也分享一下。（出于尊重原作者的目的，CSS我就不修改了）

</>复制代码 
  1. GitHub传送门：https://github.com/lancer07/css3HelloKitty
第一步：从头说起

难点是胡须，因为胡须有点弯的，所以每根胡须需要2个元素来实现

</>复制代码 
  2.    
  3.       
  4.       
  5.       
  6.    
  7.                 
  8.    
  9.        
  10.    
  11.    
  12.        
  13.    
  14.    
  15.         
  16.    
  17.     
  18.          
  19.     
  20.     
  21.          
  22.     
  23.     
  24.           
  25.     
</>复制代码 
  1. #head {
  2.     position:absolute;
  3.     top:124px;
  4.     left:130px;
  5.     width:224px;
  6.     height:167px;
  7.     background-color:#FFF;
  8.     border:8px solid #000;
  9.     -moz-border-radius:160px;
  10.     -webkit-border-radius:160px;
  11.     border-radius:160px;
  12.     z-index:500;
  13.     -moz-transform:rotate(2deg);
  14.     -ms-transform:rotate(2deg);
  15.     -o-transform:rotate(2deg);
  16.     -webkit-transform:rotate(2deg);
  17.     transform:rotate(2deg);
  18.     -webkit-backface-visibility:hidden;
  19.     
  20. }
  21. .lefteye {
  22.     position:absolute;
  23.     top:97px;
  24.     left:45px;
  25.     width:19px;
  26.     height:24px;
  27.     background-color:#000;
  28.     -moz-border-radius:18px;
  29.     -webkit-border-radius:18px;
  30.     border-radius:18px;
  31. }
  32. .righteye {
  33.     position:absolute;
  34.     top:93px;
  35.     left:162px;
  36.     width:19px;
  37.     height:24px;
  38.     background-color:#000;
  39.     -moz-border-radius:18px;
  40.     -webkit-border-radius:18px;
  41.     border-radius:18px;
  42. }
  43. .nose {
  44.     position:absolute;
  45.     top:115px;
  46.     left:100px;
  47.     width:16px;
  48.     height:9px;
  49.     background-color:#FFB827;
  50.     border:6px solid #000;    
  51.     -moz-border-radius:25px;
  52.     -webkit-border-radius:25px;
  53.     border-radius:25px;
  54. }
  55. .leftwhiskers, .rightwhiskers {
  56.     background-color:#000;
  57. }
  58. .one {
  59.     position:absolute;
  60.     top:96px;
  61.     left:-1px;
  62.     width:20px;
  63.     height:9px;
  64.     -moz-border-radius:0 20px 15px 0;
  65.     -webkit-border-radius:0 20px 15px 0;
  66.     border-radius:0 20px 15px 0;
  67.     -moz-transform:rotate(6deg);
  68.     -ms-transform:rotate(6deg);
  69.     -o-transform:rotate(6deg);
  70.     -webkit-transform:rotate(6deg);
  71. }
  72. .one span {
  73.     display:block;
  74.     position:absolute;
  75.     left:-32px;
  76.     top:4px;
  77.     width:33px;
  78.     height:9px;
  79.     background-color:inherit;
  80.     -moz-border-radius: 35px 10px 10px;
  81.     -webkit-border-radius: 35px 10px 10px;
  82.     border-radius: 35px 10px 10px;
  83.     -moz-transform:rotate(-15deg);
  84.     -ms-transform:rotate(-15deg);
  85.     -o-transform:rotate(-15deg);
  86.     -webkit-transform:rotate(-15deg);
  87. }
  88. .two {
  89.     position:absolute;
  90.     top:120px;
  91.     left:6px;
  92.     width:15px;
  93.     height:8px;
  94.     -moz-border-radius:10px 20px 13px 10px;
  95.     -webkit-border-radius:10px 20px 13px 10px;
  96.     border-radius:10px 20px 13px 10px;
  97.     -moz-transform:rotate(-15deg);
  98.     -ms-transform:rotate(-15deg);
  99.     -o-transform:rotate(-15deg);
  100.     -webkit-transform:rotate(-15deg);
  101. }
  102. .two span {
  103.     display:block;
  104.     position:absolute;
  105.     top:0px;
  106.     left:-24px;
  107.     height:8px;
  108.     width:25px;
  109.     background-color:inherit;
  110.     -moz-border-radius:10px 0 0 15px;
  111.     -webkit-border-radius:10px 0 0 15px;
  112.     border-radius:10px 0 0 15px;
  113.     -moz-transform:rotate(-2deg);
  114.     -ms-transform:rotate(-2deg);
  115.     -o-transform:rotate(-2deg);
  116.     -webkit-transform:rotate(-2deg);
  117. }
  118. .three {
  119.     position:absolute;
  120.     top:138px;
  121.     left:20px;
  122.     width:15px;
  123.     height:8px;
  124.     -moz-border-radius:10px;
  125.     -webkit-border-radius:10px;
  126.     border-radius:10px;
  127.     -moz-transform:rotate(-16deg);
  128.     -ms-transform:rotate(-16deg);
  129.     -o-transform:rotate(-16deg);
  130.     -webkit-transform:rotate(-16deg);
  131. }
  132. .three span {
  133.     display:block;
  134.     position:absolute;
  135.     top:5px;
  136.     left:-34px;
  137.     width:37px;
  138.     height:8px;
  139.     background-color:inherit;
  140.     -moz-border-radius:18px 10px 12px;
  141.     -webkit-border-radius:18px 10px 12px;
  142.     border-radius:18px 10px 12px;
  143.     -moz-transform:rotate(-19deg);
  144.     -ms-transform:rotate(-19deg);
  145.     -o-transform:rotate(-19deg);
  146.     -webkit-transform:rotate(-19deg);
  147. }
  148. .four {
  149.     position: absolute;
  150.     top: 82px;
  151.     left: 205px;
  152.     width: 25px;
  153.     height: 8px;
  154.     -moz-border-radius: 10px 10px 10px 10px;
  155.     -webkit-border-radius: 10px 10px 10px 10px;
  156.     border-radius: 10px 10px 10px 10px;
  157.     -moz-transform: rotate(-13deg);
  158.     -ms-transform: rotate(-13deg);
  159.     -o-transform:rotate(-13deg);
  160.     -webkit-transform: rotate(-13deg);    
  161. }
  162. .four span {
  163.     display: block;
  164.     position: absolute;
  165.     top: 3px;
  166.     left: 20px;
  167.     width: 33px;
  168.     height: 8px;
  169.     background-color: inherit;
  170.     -moz-border-radius: 10px 18px 10px 15px;
  171.     -webkit-border-radius: 10px 18px 10px 15px;
  172.     border-radius: 10px 18px 10px 15px;
  173.     -moz-transform: rotate(13deg);
  174.     -ms-transform: rotate(13deg);
  175.     -o-transform:rotate(13deg);
  176.     -webkit-transform: rotate(13deg);
  177. }
  178. .five {
  179.     position: absolute;
  180.     top: 105px;
  181.     left: 211px;    
  182.     width: 22px;
  183.     height: 8px;
  184.     -moz-border-radius:10px;
  185.     -webkit-border-radius:10px;
  186.     border-radius:10px;
  187. }
  188. .five span {
  189.     display: block;
  190.     position: absolute;
  191.     top: 2px;
  192.     left: 16px;    
  193.     width: 25px;    
  194.     height: 8px;    
  195.     background-color: inherit;
  196.     -moz-border-radius: 10px;
  197.     -webkit-border-radius: 10px;
  198.     border-radius: 10px;
  199.     -moz-transform: rotate(11deg);
  200.     -ms-transform: rotate(11deg);
  201.     -o-transform:rotate(11deg);
  202.     -webkit-transform: rotate(11deg);
  203. }
  204. .six {
  205.     position: absolute;
  206.     top: 129px;    
  207.     left: 200px;
  208.     width: 22px;
  209.     height: 8px;
  210.     -moz-border-radius: 20px 10px 10px 18px;
  211.     -webkit-border-radius: 20px 10px 10px 18px;
  212.     border-radius: 20px 10px 10px 18px;
  213.     -moz-transform: rotate(11deg);
  214.     -ms-transform: rotate(11deg);
  215.     -o-transform:rotate(11deg);
  216.     -webkit-transform: rotate(11deg);
  217. }
  218. .six span {
  219.     display: block;
  220.     position: absolute;
  221.     top: 3px;
  222.     left: 18px;
  223.     width: 26px;    
  224.     height: 8px;
  225.     background-color: inherit;
  226.     -moz-border-radius: 10px 10px 10px 10px;
  227.     -webkit-border-radius: 10px 10px 10px 10px;
  228.     border-radius: 10px 10px 10px 10px;
  229.     -moz-transform: rotate(13deg);
  230.     -ms-transform: rotate(13deg);
  231.     -o-transform:rotate(13deg);
  232.     -webkit-transform: rotate(13deg);
  233. }
第二步：耳朵

右耳画的比较粗糙，原因是因为马上要画个蝴蝶结啊。

</>复制代码 
  2.      
</>复制代码 
  1. #leftear {
  2.     position:absolute;
  3.     top:-16px;
  4.     left:-3px;
  5.     width:57px;
  6.     height:61px;
  7.     border:8px solid #000;
  8.     border-bottom-color:transparent;
  9.     border-right-color:transparent;
  10.     -moz-border-radius:20px 37px 20px 44px;
  11.     -webkit-border-radius:20px 37px 20px 44px;
  12.     border-radius:20px 37px 20px 44px;
  13.     -moz-transform:rotate(14deg);
  14.     -ms-transform:rotate(14deg);
  15.     -o-transform:rotate(14deg);
  16.     -webkit-transform:rotate(14deg);
  17.     transform:rotate(14deg);
  18.     -webkit-backface-visibility:hidden;
  19. }
  20. #leftear span {
  21.     position:absolute;
  22.     top:2px;
  23.     left:-1px;
  24.     width:68px;
  25.     height:61px;
  26.     background-color:#FFF;
  27.     -moz-border-radius:18px 34px 20px 44px;
  28.     -webkit-border-radius:18px 34px 20px 44px;
  29.     border-radius:18px 34px 20px 44px;
  30. }
  31. #rightear {
  32.     position:absolute;
  33.     top:-27px;
  34.     left:143px;
  35.     width:57px;
  36.     height:61px;
  37.     background-color:#FFF;
  38.     border:8px solid #000;
  39.     border-bottom-color:transparent;
  40.     border-right-color:transparent;
  41.     -moz-border-radius:20px 37px 20px 44px;
  42.     -webkit-border-radius:20px 37px 20px 44px;
  43.     border-radius:20px 37px 20px 44px;
  44.     -moz-transform:rotate(80deg);
  45.     -ms-transform:rotate(80deg);
  46.     -o-transform:rotate(80deg);
  47.     -webkit-transform:rotate(80deg);
  48.     -webkit-backface-visibility:hidden;
  49. }
第三步：蝴蝶结 

</>复制代码 
  2.     
  3.     
  4.     
</>复制代码 
  1. #bow {
  2.     position:absolute;
  3.     top:134px;
  4.     left:141px;
  5.     z-index:1000;
  6. }
  7. .center {
  8.     position:absolute;
  9.     left:140px;
  10.     width:32px;
  11.     height:35px;
  12.     background-color:#F51F27;
  13.     border:8px solid #000;
  14.     -moz-border-radius:30px;
  15.     -webkit-border-radius:30px;
  16.     border-radius:30px;
  17.     z-index:2;
  18.     -moz-transform:rotate(20deg);
  19.     -ms-transform:rotate(20deg);
  20.     -o-transform:rotate(20deg);
  21.     -webkit-transform:rotate(20deg);
  22. }
  23. .left {
  24.     position:absolute;
  25.     top:-33px;
  26.     left:99px;
  27.     width:46px;
  28.     height:62px;
  29.     background-color:#F51F27;
  30.     border:8px solid #000;
  31.     -moz-border-radius: 50px 50px 55px 46px;
  32.     -webkit-border-radius: 50px 50px 55px 46px;
  33.     border-radius: 50px 50px 55px 46px;
  34.     -moz-transform:rotate(19deg);
  35.     -ms-transform:rotate(19deg);
  36.     -o-transform:rotate(19deg);
  37.     -webkit-transform:rotate(19deg);
  38. }
  39. .left span {
  40.     position:absolute;
  41.     top:20px;
  42.     left:23px;
  43.     width:15px;
  44.     height:15px;
  45.     border:6px solid #000;
  46.     -moz-border-radius:30px;
  47.     -webkit-border-radius:30px;
  48.     border-radius:30px;
  49. }
  50. .right {
  51.     position:absolute;
  52.     top:0;
  53.     left:164px;
  54.     width:43px;
  55.     height:54px;
  56.     background-color:#F51F27;
  57.     border:8px solid #000;
  58.     -moz-border-radius:78px 48px 60px 63px;
  59.     -webkit-border-radius:78px 48px 60px 63px;
  60.     border-radius:78px 48px 60px 63px;
  61.     -moz-transform:rotate(22deg);
  62.     -ms-transform:rotate(22deg);
  63.     -o-transform:rotate(22deg);
  64.     -webkit-transform:rotate(22deg);
  65. }
  66. .right span {
  67.     position:absolute;
  68.     top:18px;
  69.     left:1px;
  70.     width:15px;
  71.     height:12px;
  72.     border:6px solid #000;
  73.     -moz-border-radius:30px;
  74.     -webkit-border-radius:30px;
  75.     border-radius:30px;
  76. }
第四步：身体

经过前几次的学习之后，画身体应该没什么难度了吧，都是用各种形状的圆组成的。

</>复制代码 
  2.      
  3.      
  4.      
  5.           
  6.           
  7.           
  8.      
  9.      
  10.      
  11.      
</>复制代码 
  1. #body {
  2.     position:absolute;
  3.     top:295px;
  4.     width:250px;
  5.     height:150px;    
  6. }
  7. #leftarm {
  8.     position:absolute;
  9.     top:-8px;
  10.     left:142px;
  11.     width:40px;
  12.     height:73px;    
  13.     background-color:#FFF;
  14.     border:8px solid #000;
  15.     -moz-border-radius:158px 0 82px 100px;
  16.     -webkit-border-radius:158px 0 82px 100px;
  17.     border-radius:158px 0 82px 100px;
  18.     overflow:hidden;
  19.     -moz-transform:rotate(28deg);
  20.     -ms-transform:rotate(28deg);
  21.     -o-transform:rotate(28deg);
  22.     -webkit-transform:rotate(28deg);
  23.     -webkit-backface-visibility:hidden;
  24. }
  25. #leftarm span {
  26.     position:absolute;
  27.     top:-3px;
  28.     left:1px;
  29.     width:50px;
  30.     height:38px;
  31.     background-color:pink;
  32.     border-bottom:8px solid #000; 
  33.     -webkit-border-top-left-radius: 200px;
  34.     -moz-border-radius-topleft: 200px;
  35.     border-top-left-radius:200px;
  36.     -moz-transform:rotate(6deg);
  37.     -ms-transform:rotate(6deg);
  38.     -o-transform:rotate(6deg);
  39.     -webkit-transform:rotate(6deg);
  40. }
  41. #rightarm {
  42.     position:absolute;
  43.     top: -4px;
  44.     left: 302px;
  45.     height: 70px;
  46.     width: 40px;
  47.     background-color:#FFF;
  48.     border: 8px solid #000;
  49.     -moz-border-radius: 0 158px 100px 81px;
  50.     -webkit-border-radius: 0 158px 100px 81px;
  51.     border-radius: 0 158px 100px 81px;
  52.     overflow: hidden; 
  53.     -moz-transform: rotate(-28deg);
  54.     -ms-transform: rotate(-28deg);
  55.     -o-transform:rotate(-28deg);
  56.     -webkit-transform: rotate(-28deg);
  57.     -webkit-backface-visibility:hidden;
  58. }
  59. #rightarm span {
  60.     position:absolute;
  61.     top:-2px;
  62.     left:-4px;
  63.     width:41px;
  64.     height:36px;
  65.     background-color:pink;
  66.     border-bottom:8px solid #000;
  67.     -webkit-border-top-right-radius: 200px;
  68.     -moz-border-radius-topright: 200px;
  69.     border-top-right-radius:200px;
  70.     -moz-transform:rotate(-9deg);
  71.     -ms-transform:rotate(-9deg);
  72.     -o-transform:rotate(-9deg);
  73.     -webkit-transform:rotate(-9deg);
  74. }
  75. #chest {
  76.     position: absolute;
  77.     top: -32px;    
  78.     left: 213px;
  79.     width: 58px;
  80.     height: 54px;
  81.     background-color:pink;
  82.     border: 8px solid #000;
  83.     -moz-border-radius: 60px;
  84.     -webkit-border-radius: 60px;
  85.     border-radius: 60px;
  86. }
  87. #torso {
  88.     position:absolute;
  89.     top:-10px;
  90.     left:165px;
  91.     width:154px;
  92.     height:105px;
  93.     background-color:#F51F27;
  94.     border: 8px solid #000;
  95.     -moz-border-radius: 110px 110px 0 0;
  96.     -webkit-border-radius: 110px 110px 0 0;
  97.     border-radius: 110px 110px 0 0;
  98.     border-bottom:none;
  99. }
  100. #torso .leftshort {
  101.     display:block;
  102.     position:absolute;
  103.     top:92px;
  104.     left:-8px;
  105.     width:73px;
  106.     height:14px;
  107.     background-color:#F51F27;
  108.     border-bottom:8px solid #000;
  109.     border-left:8px solid #000;
  110.     -moz-border-radius:1px 3px 0 30px;
  111.     -webkit-border-radius:1px 3px 0 30px;
  112.     border-radius:1px 3px 0 30px;
  113.     z-index:3;
  114.     -moz-transform:rotate(2deg);
  115.     -ms-transform:rotate(2deg);
  116.     -o-transform:rotate(2deg);
  117.     -webkit-transform:rotate(2deg);
  118. }
  119. #torso .rightshort {
  120.     display:block;
  121.     position:absolute;
  122.     top:97px;
  123.     right:-8px;
  124.     width:73px;
  125.     height:8px;
  126.     background-color:#F51F27;
  127.     border-bottom:8px solid #000;
  128.     border-right:8px solid #000;
  129.     -moz-border-radius:3px 1px 30px 0;
  130.     -webkit-border-radius:3px 1px 30px 0;
  131.     border-radius:3px 1px 30px 0;
  132.     z-index:3;
  133.     -moz-transform:rotate(-2deg);
  134.     -ms-transform:rotate(-2deg);
  135.     -o-transform:rotate(-2deg);
  136.     -webkit-transform:rotate(-2deg);
  137. }
  138. .crotch {
  139.     position:absolute;
  140.     bottom:-6px;
  141.     left:71px;
  142.     width:12px;
  143.     height:12px;
  144.     background-color:#000;
  145.     -moz-border-radius:4px;
  146.     -webkit-border-radius:4px;
  147.     border-radius:4px;
  148.     -moz-transform:rotate(45deg);
  149.     -ms-transform:rotate(45deg);
  150.     -o-transform:rotate(45deg);
  151.     -webkit-transform:rotate(45deg);
  152. }
  153. #leftleg {
  154.     position:absolute;
  155.     top:100px;
  156.     left:165px;
  157.     width:73px;
  158.     height:34px;
  159.     background-color:#FFF;
  160.     border:8px solid #000;
  161.     -moz-border-radius:0 15px 25px 35px;
  162.     -webkit-border-radius:0 15px 25px 35px;
  163.     border-radius:0 15px 25px 35px;
  164. }
  165. #rightleg {
  166.     position:absolute;
  167.     top:100px;
  168.     left:246px;
  169.     width:73px;
  170.     height:34px;
  171.     background-color:#fff;
  172.     border: 8px solid #000;
  173.     -moz-border-radius:15px 0 35px 25px;
  174.     -webkit-border-radius:15px 0 35px 25px;
  175.     border-radius:15px 0 35px 25px;
  176. }
收工

欢迎大家吐槽

GPU云服务器 云服务器 二次元api 二次元网站 上云服务器 css3 css3气泡

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/115234.html

相关文章

  • SegmentFault 技术周刊 Vol.38 - 神奇的 CSS

    摘要：层叠即表示允许以多种方式来描述样式，一个元素可以被渲染呈现出多种样式。可以让属性的变化过程持续一段时间，而不是立即生效。比如，将元素的颜色从白色改为黑色，通常这个改变是立即生效的，使用后，将按一个曲线速率变化。 showImg(https://segmentfault.com/img/bVZwyL?w=900&h=385); CSS 的全称是 Cascading Style Sheet...

    elliott_hu 评论0 收藏0

  • 【二次元的CSS】—— 用 DIV + CSS3 画Hello Kitty（详解步骤）

    摘要：原本自己也想画，正巧看到一位外国友人她的个人网站。也用相同的方法画了。且细节相当到位。在此我也分享一下。第三步蝴蝶结第四步身体经过前几次的学习之后，画身体应该没什么难度了吧，都是用各种形状的圆组成的。收工欢迎大家吐槽 原本自己也想画Hello Kitty，正巧看到一位外国友人Lauren McConachie（她的个人网站： http://lorenai.com。）也用相同的方法画了。...

    TesterHome 评论0 收藏0

  • 【二次元的CSS】—— 用 DIV + CSS3 画咸蛋超人（详解步骤）

    摘要：仅仅使用作为身体的布局，用的各种和圆角属性来绘制各部位的形状，当然也不会使用任何图片哦。有的同学说，用不是能画得更逼真而且更简单吗这点我也非常赞同，但我的理由还是，那就没意思了。这次写的详细一点，把各个部位都拆出来分析。收工欢迎大家吐槽 仅仅使用div作为身体的布局，用css3的各种transform和圆角属性来绘制各部位的形状，当然也不会使用任何图片哦。那就没意思了。有的同学说，用c...

    Codeing_ls 评论0 收藏0

  • 【二次元的CSS】—— 用 DIV + CSS3 画咸蛋超人（详解步骤）

    摘要：仅仅使用作为身体的布局，用的各种和圆角属性来绘制各部位的形状，当然也不会使用任何图片哦。有的同学说，用不是能画得更逼真而且更简单吗这点我也非常赞同，但我的理由还是，那就没意思了。这次写的详细一点，把各个部位都拆出来分析。收工欢迎大家吐槽 仅仅使用div作为身体的布局，用css3的各种transform和圆角属性来绘制各部位的形状，当然也不会使用任何图片哦。那就没意思了。有的同学说，用c...

    mayaohua 评论0 收藏0

发表评论

登陆后可评论

0条评论

wean

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<