這篇文章給大家分享的是有關(guān)怎么用純CSS實現(xiàn)大白的形象的內(nèi)容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。
成都創(chuàng)新互聯(lián)-專業(yè)網(wǎng)站定制、快速模板網(wǎng)站建設(shè)、高性價比閬中網(wǎng)站開發(fā)、企業(yè)建站全套包干低至880元,成熟完善的模板庫,直接使用。一站式閬中網(wǎng)站制作公司更省心,省錢,快速模板網(wǎng)站建設(shè)找我們，業(yè)務(wù)覆蓋閬中地區(qū)。費用合理售后完善，十余年實體公司更值得信賴。
代碼解讀
整個人物分為3部分：頭、身體、腿，下面按照這個順序分別畫出，先畫頭部。
定義dom，容器.baymax表示大白，head表示頭部：
居中顯示：
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元素：
定義身體的寬度：
.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;
}
至此，完成了右胳膊。把右胳膊復(fù)制并水平翻轉(zhuǎn)，即可得到左胳膊：
.body.arm.left{
transform:scaleX(-1);
right:0;
z-index:-3;
}
接下來畫腿部。
在html文件中增加腿的dom元素：
畫出腿的內(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);
}
至此，完成了右腿。把右腿復(fù)制并水平翻轉(zhuǎn)，即可得到左腿：
.leg.left{
transform-origin:right;
transform:scaleX(-1);
}
感謝各位的閱讀！關(guān)于“怎么用純CSS實現(xiàn)大白的形象”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，讓大家可以學(xué)到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！
重慶分公司
重慶分公司
