如何使用纯CSS实现大白的形象_第1页
免费预览已结束,剩余16页可下载查看

下载本文档

版权说明:本文档由用户提供并上传,收益归属内容提供方,若内容存在侵权,请进行举报或认领

文档简介

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;

温馨提示

  • 1. 本站所有资源如无特殊说明,都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等,如果需要附件,请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸,网页内容里面会有图纸预览,若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间,仅对用户上传内容的表现方式做保护处理,对用户上传分享的文档内容本身不做任何修改或编辑,并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容,请与我们联系,我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

评论

0/150

提交评论