用纯CSS画大白

纯CSS打造网页大白知识点：

     首先要把大白分割，整体baymax中包含header（eye1,eye2,mouth），torso（heart），belly（cover），l-bigfinger,r-bigfinger，l-smallfinger，r-smallfinger，l-leg，r-leg。

1.    因为大白是白色，所以背景颜色（body）要设为深色。
2.    大白居中，div居中要用margin：0  auto；
3.    保险起见overflow：hidden

首先写head：

1.     设置宽高之后以百分比定义圆角的形状   border-radius:50%
2.     margin-bottom设为负值，使身体与头部有重叠
3.     因为只有设置了position 为relative absolute fixed 后 ，设置z-index才生效。并且z-index是相对于同一父亲元素的所有子元素的层级关系，z-index的值越大，说明他的位置越高。 

             所以给头部设置position：relative，然后将层级z-index：100

其次写eye1,eye2:

1.      用到旋转对称使左右眼对称，transform：rotate（**deg）与transform：rotate（-**deg）左右对称，左右手臂，左右手指，左右腿都会用到。

 

附代码：

 

<! DOCTYPE html>

< html >

     < head >

           < meta charset = "UTF-8" >

           < title ></ title >

           < style >

            body { background : #595959 ; }

                 #baymax {

                        margin : 0 auto ;

                      height : 600 px ;

                 }

                 #head {

                      height : 64 px ;

                width : 100 px ;

                      background-color : white;

                      border-radius : 50 % ;

                      margin : 0 auto ;

                      margin-bottom : -20 px ;

                      border-bottom : 5 px solid #E0E0E0 ;

                      z-index : 100 ;

    /*生成相对定位的元素*/

                   position : relative ;

                 }

                 #eye1 {

                      width : 15 px ;

                      height : 15 px ;

                      background : black;

                      border-radius : 50 % ;

                      position : absolute ;

                      left : 20 px ;

                      top : 20 px ;

                      transform : rotate ( 8 deg ) ;

                 }

                 #eye2 {

                      width : 15 px ;

                      height : 15 px ;

                      background : black;

                      border-radius : 50 % ;

                      position : absolute ;

                      transform : rotate ( -8 deg ) ;

                left : 60 px ;

                 top : 20 px ;

                 }

                 #mouth {

                      width : 40 px ;

                      height : 2 px ;

                      background : black;

                      position : absolute ;

                      left : 30 px ;

                      top : 27 px ;

                     

                 }

                 #torso , #belly {

                      width : 150 px ;

                      height : 180 px ;

                      margin : 0 auto ;

                      background : white;

                      border-radius : 45 % ;

                      border : 5 px solid #DCDCDC ;

                      border-top : none ;

                      z-index : 1 ;

                 }

                

                 #belly {

                      width : 200 px ;

                      height : 240 px ;

                      margin-top : -145 px ;

                      position : relative ;

                      z-index : 5 ;

                      }

                 #cover {

                      width : 180 px ;

                      height : 250 px ;

                      margin : 0 auto ;

                      background : white;

                      border-radius : 47 % ;

                      position : relative ;

                    top : -20 px ;

                      }

                 #heart {

                      width : 20 px ;

                      height : 20 px ;

                      border-radius : 50 % ;

                      background : white;

                      border : 1 px solid #DCDCDC ;

                      box-shadow : 2 px 5 px 2 px #ccc inset ;

                      margin : 0 auto ;

                      z-index : 111 ;

                      position : relative ;

                     right : -40 px ;

                top : 50 px ;

                     

                 }

                 #left-arm , #right-arm {

                      width : 80 px ;

                      height : 220 px ;

                      margin : 0 auto ;

                      background : white;

                      border-radius : 47 % ;

                      transform : rotate ( 23 deg ) ;

                      position : relative ;

                      top : -270 px ;

                      left : -95 px ;

                 }

                 #right-arm {

                      transform : rotate ( -23 deg ) ;

                      position : relative ;

                      top : -490 px ;

                      left : 95 px ;

                 }

                 #l-bigfinger {

                      width : 20 px ;

                      height : 60 px ;

                      margin : 0 auto ;

                      background : white;

                      border-radius : 47 % ;

                      transform : rotate ( 125 deg ) ;

                      position : absolute ;

                      top : 190 px ;

                      left : 35 px ;

                 }

                 #l-smallfinger {

                 width : 15 px ;

                      height : 40 px ;

                      margin : 0 auto ;

                      background : white;

                      border-radius : 47 % ;

                      transform : rotate ( 125 deg ) ;

                      position : absolute ;

                      top : 190 px ;

                      left : 52 px ; 

                 }

                

                 #r-smallfinger {

                      width : 15 px ;

                      height : 40 px ;

                      margin : 0 auto ;

                      background : white;

                      border-radius : 47 % ;

                      transform : rotate ( -125 deg ) ;

                      position : absolute ;

                      top : 190 px ;

                      left : 12 px ;

                 }

                 #r-bigfinger {

                      width : 20 px ;

                      height : 60 px ;

                      margin : 0 auto ;

                      background : white;

                      border-radius : 47 % ;

                      transform : rotate ( -125 deg ) ;

                      position : absolute ;

                      top : 190 px ;

                      left : 25 px ;

                 }

                 #left-leg {

                      width : 75 px ;

                      height : 150 px ;

                      margin : 0 auto ;

                      background : white;

                      border-radius : 47 % ;

                      position : relative ;

                      left : -40 px ;

                      top : -500 px ;

                      border-bottom-right-radius : 15 % ;

                 }

                 #right-leg {

                      width : 75 px ;

                      height : 150 px ;

                      margin : 0 auto ;

                      background : white;

                      border-radius : 47 % ;

                      position : relative ;

                      left : 40 px ;

                      top : -650 px ;

                      border-bottom-left-radius : 15 % ;

                 }

                

            </ style >

     </ head >

     < body >

           < div id = "baymax" >

           < div id = "head" >

                < div id = "eye1" ></ div >

                < div id = "eye2" ></ div >

                < div id = "mouth" ></ div >

           </ div >

           < div id = "torso" >

                < div id = "heart" ></ div >

           </ div >

           < div id = "belly" >

                < div id = "cover" ></ div >

           </ div >

           < div id = "left-arm" >

                < div id = "l-bigfinger" ></ div >

                < div id = "l-smallfinger" ></ div >

           </ div >

           < div id = "right-arm" >

                < div id = "r-bigfinger" ></ div >

                < div id = "r-smallfinger" ></ div >

           </ div >

           < div id = "left-leg" ></ div >

           < div id = "right-leg" ></ div >

     </ div >     

     </ body >

</ html >

转载于:https://www.cnblogs.com/aaaaniu/p/8136630.html