怎么用純CSS實現(xiàn)大白的形象

這篇文章給大家分享的是有關(guān)怎么用純CSS實現(xiàn)大白的形象的內(nèi)容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

　　代碼解讀

　　整個人物分為3部分：頭、身體、腿，下面按照這個順序分別畫出，先畫頭部。

　　定義dom，容器.baymax表示大白，head表示頭部：

　　<divclass="baymax">

　　<divclass="head">

　　<divclass="eyes"></div>

　　</div>

　　</div>

　　居中顯示：

　　body{

　　margin:0;

　　height:100vh;

　　display:flex;

　　align-items:center;

　　justify-content:center;

　　background-color:rgba(176,0,0,0.75);

　　}

　　定義容器尺寸和子元素對齊方式：

　　.baymax{

　　width:30em;

　　height:41em;

　　font-size:10px;

　　display:flex;

　　justify-content:center;

　　position:relative;

　　}

　　畫出頭部輪廓：

　　.head{

　　position:absolute;

　　width:9em;

　　height:6em;

　　background-color:white;

　　border-radius:50%;

　　box-shadow:

　　inset0-1.5em3emrgba(0,0,0,0.2),

　　00.5em1.5emrgba(0,0,0,0.2);

　　}

　　畫出雙眼中間的線條：

　　.head.eyes{

　　position:absolute;

　　width:4.8em;

　　height:0.1em;

　　background-color:#222;

　　top:2.3em;

　　left:calc((9em-4.8em)/2);

　　}

　　畫出雙眼：

　　.head.eyes::before,

　　.head.eyes::after{

　　content:'';

　　position:absolute;

　　width:0.8em;

　　height:0.9em;

　　background-color:#222;

　　border-radius:50%;

　　top:-0.3em;

　　}

　　.head.eyes::after{

　　right:0;

　　}

　　接下來畫身體。

　　html文件中增加身體的dom元素：

　　<divclass="baymax">

　　<divclass="head">

　　<!--略-->

　　</div>

　　<divclass="body">

　　<divclass="chest">

　　<spanclass="button"></span>

　　</div>

　　<divclass="belly"></div>

　　<divclass="leftarm">

　　<divclass="fingers"></div>

　　</div>

　　<divclass="rightarm">

　　<divclass="fingers"></div>

　　</div>

　　</div>

　　</div>

　　定義身體的寬度：

　　.body{

　　position:absolute;

　　width:inherit;

　　}

　　畫出胸部：

　　.body.chest{

　　position:absolute;

　　width:19em;

　　height:26em;

　　background-color:white;

　　top:4em;

　　left:calc((100%-19em)/2);

　　border-radius:50%;

　　z-index:-1;

　　}

　　畫出胸前的按鈕：

　　.body.chest.button{

　　position:absolute;

　　width:2em;

　　height:2em;

　　background-color:white;

　　border-radius:50%;

　　top:4em;

　　right:4em;

　　box-shadow:

　　inset0-0.5em0.8emrgba(0,0,0,0.15),

　　0.2em0.3em0.2emrgba(0,0,0,0.05);

　　filter:opacity(0.75);

　　}

　　畫出肚皮：

　　.body.belly{

　　position:absolute;

　　width:24em;

　　height:31em;

　　background-color:white;

　　top:5.5em;

　　left:calc((100%-24em)/2);

　　border-radius:50%;

　　z-index:-2;

　　box-shadow:

　　inset0-2.5em4emrgba(0,0,0,0.15),

　　00.5em1.5emrgba(0,0,0,0.25);

　　}

　　定義胳膊的高度起點：

　　.body.arm{

　　position:absolute;

　　top:7.5em;

　　}

　　胳膊分為肘以上的部分和肘以下的部分。

　　先設(shè)計這兩段的共有屬性：

　　.body.arm::before,

　　.body.arm::after{

　　content:'';

　　position:absolute;

　　background-color:white;

　　border-radius:50%;

　　transform-origin:top;

　　z-index:-3;

　　}

　　再用偽元素分別畫出這兩部分：

　　.body.arm::before{

　　width:9em;

　　height:20em;

　　left:7em;

　　transform:rotate(30deg);

　　}

　　.body.arm::after{

　　width:8em;

　　height:15em;

　　left:-0.8em;

　　top:9.5em;

　　transform:rotate(-5deg);

　　box-shadow:inset0.4em-1em1emrgba(0,0,0,0.2);

　　}

　　定義兩根手指的共有屬性：

　　.body.arm.fingers::before,

　　.body.arm.fingers::after{

　　content:'';

　　position:absolute;

　　width:1.8em;

　　height:4em;

　　background-color:white;

　　border-radius:50%;

　　transform-origin:top;

　　}

　　用偽元素分別畫出兩根手指：

　　.body.arm.fingers::before{

　　top:22em;

　　left:2em;

　　transform:rotate(-25deg);

　　box-shadow:inset0.2em-0.4em0.4emrgba(0,0,0,0.4);

　　}

　　.body.arm.fingers::after{

　　top:21.5em;

　　left:4.8em;

　　transform:rotate(-5deg);

　　box-shadow:inset-0.2em-0.4em0.8emrgba(0,0,0,0.3);

　　z-index:-3;

　　}

　　至此，完成了右胳膊。把右胳膊復制并水平翻轉(zhuǎn)，即可得到左胳膊：

　　.body.arm.left{

　　transform:scaleX(-1);

　　right:0;

　　z-index:-3;

　　}

　　接下來畫腿部。

　　在html文件中增加腿的dom元素：

　　<divclass="baymax">

　　<divclass="head">

　　<!--略-->

　　</div>

　　<divclass="body">

　　<!--略-->

　　</div>

　　<divclass="leftleg"></div>

　　<divclass="rightleg"></div>

　　</div>

　　畫出腿的內(nèi)側(cè)：

　　.leg{

　　position:absolute;

　　width:5em;

　　height:16em;

　　bottom:0;

　　background-color:white;

　　border-bottom-right-radius:1.5em;

　　left:10em;

　　box-shadow:inset-0.7em-0.6em0.7emrgba(0,0,0,0.1);

　　z-index:-3;

　　}

　　畫出腿的外側(cè)：

　　.leg::before{

　　content:'';

　　position:absolute;

　　width:2.5em;

　　height:inherit;

　　background-color:white;

　　border-bottom-left-radius:100%;

　　left:-2.5em;

　　box-shadow:inset0.7em1.5em0.7emrgba(0,0,0,0.4);

　　}

　　至此，完成了右腿。把右腿復制并水平翻轉(zhuǎn)，即可得到左腿：

　　.leg.left{

　　transform-origin:right;

　　transform:scaleX(-1);

　　}

感謝各位的閱讀！關(guān)于“怎么用純CSS實現(xiàn)大白的形象”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！