第一篇文章，也不知道寫啥，看到一篇比較好玩的文章，所以先轉(zhuǎn)載過來，嘿嘿~
原文鏈接：用 HTML 和 CSS 來打造一個(gè)自己的「大白(●—●)」

還記得《超能陸戰(zhàn)隊(duì)》里的 “暖男” -「大白」 么？是不是很想擁有一個(gè)？我們就利用 HTML 和 CSS 來打造一個(gè)自己的「大白」吧！

最終的成果是這樣滴，是不是萌萌噠……

PS：您最好對(duì) HTML 和 CSS 有一定的了解，但如果你是小白也沒關(guān)系，小白見「大白」也是可以的！

再PS：這個(gè)「大白」的教程步驟是基于實(shí)驗(yàn)樓環(huán)境制作的，你也可以上實(shí)驗(yàn)樓在線查看該課程~

進(jìn)入到/home/shiyanlou/目錄下，新建空白文檔：

命名為Baymax.html （其它名字也可以，但后綴名必須是.html）：

使用 gedit 打開，準(zhǔn)備編輯代碼：

填寫以下代碼：

我們已經(jīng)使用 HTML 定義好「大白」的各個(gè)元素，現(xiàn)在就需要利用到 CSS 來繪制它的樣式外表。

由于「大白」是白色的，為了更容易辨識(shí)，我們把背景設(shè)為深色。

然后首先是頭部：

body {
    background: #595959;
}

#baymax{
    /*設(shè)置為 居中*/    
    margin: 0 auto;

    /*高度*/   
    height: 600px;

    /*隱藏溢出*/    
    overflow: hidden;
}

#head{
    height: 64px;
    width: 100px;

    /*以百分比定義圓角的形狀*/    
    border-radius: 50%;

    /*背景*/    
    background: #fff;
    margin: 0 auto;
    margin-bottom: -20px;

    /*設(shè)置下邊框的樣式*/    
    border-bottom: 5px solid #e0e0e0;

    /*屬性設(shè)置元素的堆疊順序；    擁有更高堆疊順序的元素總是會(huì)處于堆疊順序較低的元素的前面*/    
    z-index: 100;

    /*生成相對(duì)定位的元素*/    
    position: relative;
}

效果預(yù)覽：

趕緊再來添加眼睛和嘴吧！

#eye,
#eye2{
    width: 11px;
    height: 13px;
    background: #282828;
    border-radius: 50%;
    position: relative;
    top: 30px;
    left: 27px;

    /*旋轉(zhuǎn)該元素*/    
    transform: rotate(8deg);
}

#eye2{
    /*使其旋轉(zhuǎn)對(duì)稱*/    
    transform: rotate(-8deg);
    left: 69px;    top: 17px;
}

#mouth{
    width: 38px;
    height: 1.5px;
    background: #282828;
    position: relative;
    left: 34px;
    top: 10px;
}

一個(gè) mini 的「大白」，雛形初現(xiàn)：

接下來是軀干和腹部：

#torso,
#belly{
    margin: 0 auto;
    height: 200px;
    width: 180px;
    background: #fff;
    border-radius: 47%;

    /*設(shè)置邊框*/    
    border: 5px solid #e0e0e0;
    border-top: none;
    z-index: 1;
}

#belly{
    height: 300px;
    width: 245px;
    margin-top: -140px;
    z-index: 5;
}

#cover{
    width: 190px;
    background: #fff;
    height: 150px;
    margin: 0 auto;
    position: relative;
    top: -20px;
    border-radius: 50%;
}

賦予「大白」象征生命的心臟：

#heart{  
  width:25px; 
  height:25px; 
  border-radius:50%; 
  position:relative; 

  /*向邊框四周添加陰影效果*/
  box-shadow:2px 5px 2px #ccc inset; 

  right:-115px; 
  top:40px; 
  z-index:111; 
  border:1px solid #ccc;
}

現(xiàn)在的「大白」是這個(gè)樣子的了：

還沒有手和腳，怪萌怪萌的...「大白」需要溫暖的手臂：

#left-arm,
#right-arm{
    height: 270px;
    width: 120px;
    border-radius: 50%;
    background: #fff;
    margin: 0 auto;
    position: relative;
    top: -350px;
    left: -100px;
    transform: rotate(20deg);
    z-index: -1;
}

#right-arm{
    transform: rotate(-20deg);
    left: 100px;
    top: -620px;
}

還沒有手指頭呢：

#l-bigfinger,
#r-bigfinger{
    height: 50px;
    width: 20px;
    border-radius: 50%;
    background: #fff;
    position: relative;
    top: 250px;
    left: 50px;
    transform: rotate(-50deg);
}

#r-bigfinger{
    left: 50px;
    transform: rotate(50deg);
}

#l-smallfinger,
#r-smallfinger{
    height: 35px;
    width: 15px;
    border-radius: 50%;
    background: #fff;
    position: relative;
    top: 195px;
    left: 66px;
    transform: rotate(-40deg);
}

#r-smallfinger{
    background: #fff;
    transform: rotate(40deg);
    top: 195px;
    left: 37px;
}

有點(diǎn)意思了：

迫不及待要給「大白」加上腿了吧：

#left-leg,
#right-leg{
    height: 170px;
    width: 90px;
    border-radius: 40% 30% 10px 45%;
    background: #fff;
    position: relative;
    top: -640px;
    left: -45px;
    transform: rotate(-1deg);
    z-index: -2;
    margin: 0 auto;
}

#right-leg{
    background: #fff;
    border-radius:30% 40% 45% 10px;
    margin: 0 auto;
    top: -810px;
    left: 50px;
    transform: rotate(1deg);
}

duang~ duang~ duang~ 特技完成！

注：因?yàn)楹茉敿?xì)的教程，所以轉(zhuǎn)載了