怎么用纯CSS实现大白的形象

这篇文章给大家分享的是有关怎么用纯CSS实现大白的形象的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。

　　代码解读

　　整个人物分为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;

　　}

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

　　先设计这两段的共有属性：

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

　　}

　　至此，完成了右胳膊。把右胳膊复制并水平翻转，即可得到左胳膊：

　　.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>

　　画出腿的内侧：

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

　　}

　　画出腿的外侧：

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

　　}

　　至此，完成了右腿。把右腿复制并水平翻转，即可得到左腿：

　　.leg.left{

　　transform-origin:right;

　　transform:scaleX(-1);

　　}

感谢各位的阅读！关于“怎么用纯CSS实现大白的形象”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！