如何使用纯CSS实现大白的形象

1、如何使用纯css实现大白的形象源代码下载 代码解读 囫囵人物分为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;

2、 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:

3、222; top:2.3em; left:calc(9em-4.8em)/2); 画出双眼： .head.eyes:before, .head.eyes:after content:&39;&39; 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:

4、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-sha

5、dow: 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

6、.5emrgba(0,0,0,0.25); 定义胳膊的高度起点： .body.arm position:absolute; top:7.5em; 胳膊分为肘以上的部分和肘以下的部分。 先设计这两段的共有属性： .body.arm:before, .body.arm:after content:&39;&39; position:absolute; background-color:white; border-radius:50%; transform-origin:top; z-index:-3; 再用伪元素分离画出这两部分： .body.arm:before width:9e

7、m; 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:&39;&39; position:absolute; width:1.

8、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:

9、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元素： 画出腿的内侧： .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:&39;&39; position:absolute; width:2.5em; height:inherit; background-color:white; border-bottom-left-radius:100%; left:-2.5em;