[2D CSS] -- DIV + CSS3 を使用して Dabai を描画する (詳細な手順)_html/css_WEB-ITnose

<div class="baymax-head">  <div class="head-highlight"></div>  <div class="baymax-eyes"></div></div>

.baymax-head {  position: absolute;  left: 50%;  margin-left: -21px;  width: 42px;  height: 28px;  -webkit-border-radius: 50%;  -moz-border-radius: 50%;  -ms-border-radius: 50%;  border-radius: 50%;  -webkit-transform: rotate(5deg);  -moz-transform: rotate(5deg);  -ms-transform: rotate(5deg);  -o-transform: rotate(5deg);  transform: rotate(5deg);  z-index: 3;  overflow: hidden;  -webkit-box-shadow: 0 6px 8px -5px rgba(128, 128, 128, 0.75), inset 0 -6px 8px -5px rgba(204, 204, 204, 0.5);  -moz-box-shadow: 0 6px 8px -5px rgba(128, 128, 128, 0.75), inset 0 -6px 8px -5px rgba(204, 204, 204, 0.5);  box-shadow: 0 6px 8px -5px rgba(128, 128, 128, 0.75), inset 0 -6px 8px -5px rgba(204, 204, 204, 0.5);}.baymax-head .head-highlight {  position: absolute;  top: 12%;  right: 25%;  width: 45%;  height: 1%;  -webkit-border-radius: 50%;  -moz-border-radius: 50%;  -ms-border-radius: 50%;  border-radius: 50%;  background: #ffffff;  -webkit-box-shadow: 0 0 18px 9px #ffffff, 0 0 0 0 transparent;  -moz-box-shadow: 0 0 18px 9px #ffffff, 0 0 0 0 transparent;  box-shadow: 0 0 18px 9px #ffffff, 0 0 0 0 transparent;}.baymax-head .baymax-eyes {  position: relative;  top: 10px;  left: 50%;  -webkit-transform: translateX(-10px);  -moz-transform: translateX(-10px);  -ms-transform: translateX(-10px);  -o-transform: translateX(-10px);  transform: translateX(-10px);  height: 1px;  width: 20px;  background: #333333;}.baymax-head .baymax-eyes:before, .baymax-head .baymax-eyes:after {  top: -3px;  width: 6px;  height: 6px;  background: #333333;  -webkit-border-radius: 50%;  -moz-border-radius: 50%;  -ms-border-radius: 50%;  border-radius: 50%;}.baymax-head .baymax-eyes:before {  left: -2px;}.baymax-head .baymax-eyes:after {  right: -2px;}

<div class="baymax-body">  <div class="body-highlight"></div>  <div class="baymax-heart"></div></div>

.baymax-body {  position: absolute;  top: 18.66667px;  left: 50%;  -webkit-transform: translateX(-62px);  -moz-transform: translateX(-62px);  -ms-transform: translateX(-62px);  -o-transform: translateX(-62px);  transform: translateX(-62px);  width: 124px;  height: 180px;  -webkit-border-radius: 50% 50% 50% 50%/60% 60% 40% 40%;  -moz-border-radius: 50% 50% 50% 50%/60% 60% 40% 40%;  -ms-border-radius: 50% 50% 50% 50%/60% 60% 40% 40%;  border-radius: 50% 50% 50% 50%/60% 60% 40% 40%;  overflow: hidden;  z-index: 2;}.baymax-body .body-highlight {  position: absolute;  top: 20%;  right: 40%;  width: 0%;  height: 50%;  -webkit-border-radius: 50%;  -moz-border-radius: 50%;  -ms-border-radius: 50%;  border-radius: 50%;  background: #ffffff;  -webkit-box-shadow: 0 0 45px 25px #ffffff, 0 0 0 0 transparent;  -moz-box-shadow: 0 0 45px 25px #ffffff, 0 0 0 0 transparent;  box-shadow: 0 0 45px 25px #ffffff, 0 0 0 0 transparent;}.baymax-body .baymax-heart {  position: absolute;  top: 35px;  right: 30%;  height: 12px;  width: 12px;  -webkit-border-radius: 50%;  -moz-border-radius: 50%;  -ms-border-radius: 50%;  border-radius: 50%;}.baymax-body:before, .baymax-body:after {  top: 55px;  width: 15px;  height: 40px;}.baymax-body:before {  left: -8px;  -webkit-transform: rotate(15deg);  -moz-transform: rotate(15deg);  -ms-transform: rotate(15deg);  -o-transform: rotate(15deg);  transform: rotate(15deg);}.baymax-body:after {  right: -8px;  -webkit-transform: rotate(-15deg);  -moz-transform: rotate(-15deg);  -ms-transform: rotate(-15deg);  -o-transform: rotate(-15deg);  transform: rotate(-15deg);}

<div class="baymax-arm baymax-left-arm">   <div class="arm-highlight larm-highlight"></div></div><div class="baymax-arm baymax-right-arm">   <div class="arm-highlight rarm-highlight"></div></div>

.baymax-arm {  position: absolute;  top: 28px;  height: 145px;  width: 40px;  overflow: hidden;  z-index: 1;}.baymax-arm:after {  top: 60px;  height: 50px;  width: 25px;}.baymax-arm .arm-highlight {  position: absolute;  top: 25%;  width: 1%;  height: 65%;  -webkit-border-radius: 50%;  -moz-border-radius: 50%;  -ms-border-radius: 50%;  border-radius: 50%;  background: #ffffff;  -webkit-box-shadow: 0 0 16px 7px rgba(255, 255, 255, 0.8), 0 0 0 0 transparent;  -moz-box-shadow: 0 0 16px 7px rgba(255, 255, 255, 0.8), 0 0 0 0 transparent;  box-shadow: 0 0 16px 7px rgba(255, 255, 255, 0.8), 0 0 0 0 transparent;}.baymax-left-arm {  left: 65px;  -webkit-transform: rotate(25deg);  -moz-transform: rotate(25deg);  -ms-transform: rotate(25deg);  -o-transform: rotate(25deg);  transform: rotate(25deg);  -webkit-border-radius: 90px 20px 20px 90px/200px 40px 40px 200px;  -moz-border-radius: 90px 20px 20px 90px/200px 40px 40px 200px;  -ms-border-radius: 90px 20px 20px 90px/200px 40px 40px 200px;  border-radius: 90px 20px 20px 90px/200px 40px 40px 200px;}.baymax-left-arm:after {  left: -20px;}.baymax-left-arm .larm-highlight {  left: 30%;}.baymax-right-arm {  right: 65px;  -webkit-transform: rotate(-25deg);  -moz-transform: rotate(-25deg);  -ms-transform: rotate(-25deg);  -o-transform: rotate(-25deg);  transform: rotate(-25deg);  -webkit-border-radius: 20px 90px 90px 20px/40px 200px 200px 40px;  -moz-border-radius: 20px 90px 90px 20px/40px 200px 200px 40px;  -ms-border-radius: 20px 90px 90px 20px/40px 200px 200px 40px;  border-radius: 20px 90px 90px 20px/40px 200px 200px 40px;}.baymax-right-arm:after {  right: -20px;}.baymax-right-arm .rarm-highlight {  right: 30%;}