怎么用纯CSS实现大白的形象
更新:HHH   时间:2023-1-7


这篇文章给大家分享的是有关怎么用纯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实现大白的形象”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识,如果觉得文章不错,可以把它分享出去让更多的人看到吧!

返回web开发教程...