资讯专栏INFORMATION COLUMN

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

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

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

littleGrow / 3351人阅读

摘要：原本自己也想画大白，正巧看到一位同学也用相同的方法画了。且细节相当到位。同时，我也希望有更多的同学发挥自己的想象力，来找个东西画画。如果看过我前几次的分享，肯定能马上想到大白的各个部位是怎么实现的。

原本自己也想画大白，正巧看到一位同学（github：https://github.com/shiyiwang）也用相同的方法画了。 且细节相当到位。所以我就fork了一下，在此我也分享一下。
同时，我也希望有更多的同学发挥自己的想象力，来找个东西画画。

如果看过我前几次的分享，肯定能马上想到大白的各个部位是怎么实现的。

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

</>复制代码 
  2.   
  3.   
</>复制代码 
  1. .baymax-head {
  2.   position: absolute;
  3.   left: 50%;
  4.   margin-left: -21px;
  5.   width: 42px;
  6.   height: 28px;
  7.   -webkit-border-radius: 50%;
  8.   -moz-border-radius: 50%;
  9.   -ms-border-radius: 50%;
  10.   border-radius: 50%;
  11.   -webkit-transform: rotate(5deg);
  12.   -moz-transform: rotate(5deg);
  13.   -ms-transform: rotate(5deg);
  14.   -o-transform: rotate(5deg);
  15.   transform: rotate(5deg);
  16.   z-index: 3;
  17.   overflow: hidden;
  18.   -webkit-box-shadow: 0 6px 8px -5px rgba(128, 128, 128, 0.75), inset 0 -6px 8px -5px rgba(204, 204, 204, 0.5);
  19.   -moz-box-shadow: 0 6px 8px -5px rgba(128, 128, 128, 0.75), inset 0 -6px 8px -5px rgba(204, 204, 204, 0.5);
  20.   box-shadow: 0 6px 8px -5px rgba(128, 128, 128, 0.75), inset 0 -6px 8px -5px rgba(204, 204, 204, 0.5);
  21. }
  22. .baymax-head .head-highlight {
  23.   position: absolute;
  24.   top: 12%;
  25.   right: 25%;
  26.   width: 45%;
  27.   height: 1%;
  28.   -webkit-border-radius: 50%;
  29.   -moz-border-radius: 50%;
  30.   -ms-border-radius: 50%;
  31.   border-radius: 50%;
  32.   background: #ffffff;
  33.   -webkit-box-shadow: 0 0 18px 9px #ffffff, 0 0 0 0 transparent;
  34.   -moz-box-shadow: 0 0 18px 9px #ffffff, 0 0 0 0 transparent;
  35.   box-shadow: 0 0 18px 9px #ffffff, 0 0 0 0 transparent;
  36. }
  37. .baymax-head .baymax-eyes {
  38.   position: relative;
  39.   top: 10px;
  40.   left: 50%;
  41.   -webkit-transform: translateX(-10px);
  42.   -moz-transform: translateX(-10px);
  43.   -ms-transform: translateX(-10px);
  44.   -o-transform: translateX(-10px);
  45.   transform: translateX(-10px);
  46.   height: 1px;
  47.   width: 20px;
  48.   background: #333333;
  49. }
  50. .baymax-head .baymax-eyes:before, .baymax-head .baymax-eyes:after {
  51.   top: -3px;
  52.   width: 6px;
  53.   height: 6px;
  54.   background: #333333;
  55.   -webkit-border-radius: 50%;
  56.   -moz-border-radius: 50%;
  57.   -ms-border-radius: 50%;
  58.   border-radius: 50%;
  59. }
  60. .baymax-head .baymax-eyes:before {
  61.   left: -2px;
  62. }
  63. .baymax-head .baymax-eyes:after {
  64.   right: -2px;
  65. }
第二步：身体 

</>复制代码 
  2.   
  3.   
</>复制代码 
  1. .baymax-body {
  2.   position: absolute;
  3.   top: 18.66667px;
  4.   left: 50%;
  5.   -webkit-transform: translateX(-62px);
  6.   -moz-transform: translateX(-62px);
  7.   -ms-transform: translateX(-62px);
  8.   -o-transform: translateX(-62px);
  9.   transform: translateX(-62px);
  10.   width: 124px;
  11.   height: 180px;
  12.   -webkit-border-radius: 50% 50% 50% 50%/60% 60% 40% 40%;
  13.   -moz-border-radius: 50% 50% 50% 50%/60% 60% 40% 40%;
  14.   -ms-border-radius: 50% 50% 50% 50%/60% 60% 40% 40%;
  15.   border-radius: 50% 50% 50% 50%/60% 60% 40% 40%;
  16.   overflow: hidden;
  17.   z-index: 2;
  18. }
  19. .baymax-body .body-highlight {
  20.   position: absolute;
  21.   top: 20%;
  22.   right: 40%;
  23.   width: 0%;
  24.   height: 50%;
  25.   -webkit-border-radius: 50%;
  26.   -moz-border-radius: 50%;
  27.   -ms-border-radius: 50%;
  28.   border-radius: 50%;
  29.   background: #ffffff;
  30.   -webkit-box-shadow: 0 0 45px 25px #ffffff, 0 0 0 0 transparent;
  31.   -moz-box-shadow: 0 0 45px 25px #ffffff, 0 0 0 0 transparent;
  32.   box-shadow: 0 0 45px 25px #ffffff, 0 0 0 0 transparent;
  33. }
  34. .baymax-body .baymax-heart {
  35.   position: absolute;
  36.   top: 35px;
  37.   right: 30%;
  38.   height: 12px;
  39.   width: 12px;
  40.   -webkit-border-radius: 50%;
  41.   -moz-border-radius: 50%;
  42.   -ms-border-radius: 50%;
  43.   border-radius: 50%;
  44. }
  45. .baymax-body:before, .baymax-body:after {
  46.   top: 55px;
  47.   width: 15px;
  48.   height: 40px;
  49. }
  50. .baymax-body:before {
  51.   left: -8px;
  52.   -webkit-transform: rotate(15deg);
  53.   -moz-transform: rotate(15deg);
  54.   -ms-transform: rotate(15deg);
  55.   -o-transform: rotate(15deg);
  56.   transform: rotate(15deg);
  57. }
  58. .baymax-body:after {
  59.   right: -8px;
  60.   -webkit-transform: rotate(-15deg);
  61.   -moz-transform: rotate(-15deg);
  62.   -ms-transform: rotate(-15deg);
  63.   -o-transform: rotate(-15deg);
  64.   transform: rotate(-15deg);
  65. }
第三步：双手 

</>复制代码 
  2.    
  5.    
</>复制代码 
  1. .baymax-arm {
  2.   position: absolute;
  3.   top: 28px;
  4.   height: 145px;
  5.   width: 40px;
  6.   overflow: hidden;
  7.   z-index: 1;
  8. }
  9. .baymax-arm:after {
  10.   top: 60px;
  11.   height: 50px;
  12.   width: 25px;
  13. }
  14. .baymax-arm .arm-highlight {
  15.   position: absolute;
  16.   top: 25%;
  17.   width: 1%;
  18.   height: 65%;
  19.   -webkit-border-radius: 50%;
  20.   -moz-border-radius: 50%;
  21.   -ms-border-radius: 50%;
  22.   border-radius: 50%;
  23.   background: #ffffff;
  24.   -webkit-box-shadow: 0 0 16px 7px rgba(255, 255, 255, 0.8), 0 0 0 0 transparent;
  25.   -moz-box-shadow: 0 0 16px 7px rgba(255, 255, 255, 0.8), 0 0 0 0 transparent;
  26.   box-shadow: 0 0 16px 7px rgba(255, 255, 255, 0.8), 0 0 0 0 transparent;
  27. }
  28. .baymax-left-arm {
  29.   left: 65px;
  30.   -webkit-transform: rotate(25deg);
  31.   -moz-transform: rotate(25deg);
  32.   -ms-transform: rotate(25deg);
  33.   -o-transform: rotate(25deg);
  34.   transform: rotate(25deg);
  35.   -webkit-border-radius: 90px 20px 20px 90px/200px 40px 40px 200px;
  36.   -moz-border-radius: 90px 20px 20px 90px/200px 40px 40px 200px;
  37.   -ms-border-radius: 90px 20px 20px 90px/200px 40px 40px 200px;
  38.   border-radius: 90px 20px 20px 90px/200px 40px 40px 200px;
  39. }
  40. .baymax-left-arm:after {
  41.   left: -20px;
  42. }
  43. .baymax-left-arm .larm-highlight {
  44.   left: 30%;
  45. }
  46. .baymax-right-arm {
  47.   right: 65px;
  48.   -webkit-transform: rotate(-25deg);
  49.   -moz-transform: rotate(-25deg);
  50.   -ms-transform: rotate(-25deg);
  51.   -o-transform: rotate(-25deg);
  52.   transform: rotate(-25deg);
  53.   -webkit-border-radius: 20px 90px 90px 20px/40px 200px 200px 40px;
  54.   -moz-border-radius: 20px 90px 90px 20px/40px 200px 200px 40px;
  55.   -ms-border-radius: 20px 90px 90px 20px/40px 200px 200px 40px;
  56.   border-radius: 20px 90px 90px 20px/40px 200px 200px 40px;
  57. }
  58. .baymax-right-arm:after {
  59.   right: -20px;
  60. }
  61. .baymax-right-arm .rarm-highlight {
  62.   right: 30%;
  63. }
第四步：双腿 

</>复制代码 
  2.     
  3.     
  6.     
  7.     
</>复制代码 
  1. .baymax-leg {
  2.   position: absolute;
  3.   top: 165px;
  4.   width: 48px;
  5.   height: 85px;
  6.   overflow: hidden;
  7.   z-index: 1;
  8. }
  9. .baymax-leg:before {
  10.   top: -50px;
  11.   height: 100px;
  12.   width: 30px;
  13. }
  14. .baymax-leg:after {
  15.   bottom: -22px;
  16.   height: 30px;
  17.   width: 60px;
  18. }
  19. .baymax-leg .leg-highlight {
  20.   position: absolute;
  21.   top: 40%;
  22.   width: 1%;
  23.   height: 38%;
  24.   -webkit-border-radius: 50%;
  25.   -moz-border-radius: 50%;
  26.   -ms-border-radius: 50%;
  27.   border-radius: 50%;
  28.   background: #ffffff;
  29.   -webkit-box-shadow: 0 0 16px 7px rgba(255, 255, 255, 0.8), 0 0 0 0 transparent;
  30.   -moz-box-shadow: 0 0 16px 7px rgba(255, 255, 255, 0.8), 0 0 0 0 transparent;
  31.   box-shadow: 0 0 16px 7px rgba(255, 255, 255, 0.8), 0 0 0 0 transparent;
  32. }
  33. .baymax-leg .crosspart {
  34.   content: "";
  35.   position: absolute;
  36.   top: 0;
  37.   width: 48px;
  38.   height: 85px;
  39.   -webkit-box-shadow: inset 0px 0px 15px 0px #cccccc, 0 0 0 0 transparent;
  40.   -moz-box-shadow: inset 0px 0px 15px 0px #cccccc, 0 0 0 0 transparent;
  41.   box-shadow: inset 0px 0px 15px 0px #cccccc, 0 0 0 0 transparent;
  42. }
  43. .baymax-left-leg {
  44.   left: 50%;
  45.   margin-left: -50px;
  46.   -webkit-border-radius: 20% 0 30% 50%/50% 0 30% 50%;
  47.   -moz-border-radius: 20% 0 30% 50%/50% 0 30% 50%;
  48.   -ms-border-radius: 20% 0 30% 50%/50% 0 30% 50%;
  49.   border-radius: 20% 0 30% 50%/50% 0 30% 50%;
  50. }
  51. .baymax-left-leg:before {
  52.   left: -20px;
  53. }
  54. .baymax-left-leg:after {
  55.   left: 0;
  56. }
  57. .baymax-left-leg .lleg-highlight {
  58.   left: 25px;
  59.   -webkit-transform: rotate(-5deg);
  60.   -moz-transform: rotate(-5deg);
  61.   -ms-transform: rotate(-5deg);
  62.   -o-transform: rotate(-5deg);
  63.   transform: rotate(-5deg);
  64. }
  65. .baymax-right-leg {
  66.   right: 50%;
  67.   margin-right: -50px;
  68.   -webkit-border-radius: 0 20% 50% 30%/0 50% 50% 30%;
  69.   -moz-border-radius: 0 20% 50% 30%/0 50% 50% 30%;
  70.   -ms-border-radius: 0 20% 50% 30%/0 50% 50% 30%;
  71.   border-radius: 0 20% 50% 30%/0 50% 50% 30%;
  72. }
  73. .baymax-right-leg:before {
  74.   right: -20px;
  75. }
  76. .baymax-right-leg:after {
  77.   right: 0;
  78. }
  79. .baymax-right-leg .rleg-highlight {
  80.   right: 20px;
  81.   -webkit-transform: rotate(5deg);
  82.   -moz-transform: rotate(5deg);
  83.   -ms-transform: rotate(5deg);
  84.   -o-transform: rotate(5deg);
  85.   transform: rotate(5deg);
  86. }

欢迎大家吐槽

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

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

转载请注明本文地址：https://www.ucloud.cn/yun/54311.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 画大白（详解步骤）

    摘要：原本自己也想画大白，正巧看到一位同学也用相同的方法画了。且细节相当到位。同时，我也希望有更多的同学发挥自己的想象力，来找个东西画画。如果看过我前几次的分享，肯定能马上想到大白的各个部位是怎么实现的。 原本自己也想画大白，正巧看到一位同学（github：https://github.com/shiyiwang）也用相同的方法画了。 且细节相当到位。所以我就fork了一下，在此我也分享一下...

    lunaticf 评论0 收藏0

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

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

    Codeing_ls 评论0 收藏0

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

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

    mayaohua 评论0 收藏0

发表评论

登陆后可评论

0条评论

littleGrow

男|高级讲师
我要私信

TA的文章

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