
版权说明:本文档由用户提供并上传,收益归属内容提供方,若内容存在侵权,请进行举报或认领
文档简介
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. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。
最新文档
- 2025年丽水道路货运从业资格证模拟考试官方题下载
- 2025年石家庄货运资格证题库在线练习
- 终止协议书范本范文6篇
- 《宝岛台湾》说课稿
- 营养强化剂竞争策略分析报告
- 受托审计合同范本
- 原料冷库租赁合同范例
- 卫生间维修合同范本
- 台球厅租赁合同范本
- 个人辞职申请书简短
- 考前冲刺攻略课件
- 2024年中煤电力有限公司所属企业招聘29人笔试参考题库附带答案详解
- 2024年12月2025中央统战部直属事业单位应届高校毕业生公开招聘21人笔试历年典型考题(历年真题考点)解题思路附带答案详解
- 积极心理学视角下高职院校学生心理健康教育路径研究
- 2024年湖北省烟草专卖局(公司)招聘笔试真题
- 2025中铁快运股份限公司招聘全日制普通高校毕业生35人易考易错模拟试题(共500题)试卷后附参考答案
- 2025年浙江宁波宁兴集团有限公司招聘笔试参考题库含答案解析
- 计算机网络试题及答案
- 2025年安徽马鞍山市两山绿色生态环境建设有限公司招聘笔试参考题库附带答案详解
- 人效管理措施
- 2024年下半年中国海油秋季校园招聘易考易错模拟试题(共500题)试卷后附参考答案
评论
0/150
提交评论