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

もともとダバイを描きたかったのですが、クラスメイト（github: https://github.com/shiyiwang）も同じ方法で描いているのをたまたま見かけました。 そして、詳細はかなり整っています。そこで、フォークしてここで共有します。

同時に、より多くの生徒が想像力を働かせて何かを見つけてくれることを願っています。

私の以前の共有を読んでいるなら、ベイマックスの各部分がどのように実現されるかをすぐに考えることができるでしょう。

GitHub ポータル: https://github.com/lancer07/css3_Baymax

ステップ 1: 頭

<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;}

ステップ 2: 体

<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);}

Step 3: 手

rree rree

ステップ 4: 脚

<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%;}

コメント大歓迎です