css打造大白

最新推荐文章于 2022-04-15 20:28:35 发布

雪掌柜

最新推荐文章于 2022-04-15 20:28:35 发布

阅读量296

点赞数

分类专栏： css 文章标签： css

css 专栏收录该内容

1 篇文章

订阅专栏

本文详细介绍了一个使用纯HTML和CSS实现的Baymax机器人绘制过程。通过精心设计的布局和样式，作者逐步构建出了Baymax的头部、躯干、四肢等部分，并利用CSS属性实现了细致的外观调整。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>baymax</title>
</head>
<style>
body{
background:#595959;
}

#baymax{
margin: 0 auto;
height: 600px;
overflow:hidden;
}

#head{
height:64px;
width:100px;
background:#fff;
border-radius:50%;
margin:0 auto;
margin-bottom:-20px;
border-bottom:5px soled #e0e0e0;
z-index:100; /*属性设置元素的堆叠顺序；拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面*/
position:relative;/*生成相对定位的元素*/
}
#eye,#eye2{
width:11px;
height:13px;
background:#282828;
border-radius:50%;
position:relative;
top:30px;
left:27px;
transform:rotate(8deg);/*旋转该元素*/
}

#eye2{
transform: rotate(-8deg);
left:69px;
top:17px;

}

#mouth{
width:38px;
height:1.5px;
background:#282828;
position:relative;
left:34px;
top:10px;
}

#torso,#belly{
margin:0 auto;
height:200px;
width:180px;
background:#fff;
border-radius:47%;
border:5px solid #e0e0e0;
border-top:none;
z-index:1;

}

#belly{
height:300px;
width:245px;
margin-top:-140px;
z-index:5;
}
#cover{
width:190px;
background:#fff;
height:150px;
margin:0 auto;
position:relative;
top:-20px;
border-radius:50%;
}
#heart{
width:25px;
height:25px;
border-radius:50%;
position:relative;
box-shadow:2px 5px 2px #ccc inset;/*向边框四周添加阴影效果*/
right:-115px;
top:40px;
z-index:111;
border:1px solid #ccc;
}
#left-arm,#right-arm{
height:270px;
width:120px;
border-radius:50%;
background:#fff;
margin:0 auto;
position:relative;
top:-350px;
left:-100px;
transform:rotate(20deg);
z-index:-1;
}
#right-arm{
transform:rotate(-20deg);
left:100px;
top:-620px;
}

#l-bigfinger,#r-bigfinger{
height:50px;
width:20px;
border-radius:50%;
background:#fff;
position:relative;
top:250px;
left:50px;
transform:rotate(-50deg);
}
#r-bigfinger{
transform:rotate(50deg);
}
#l-samllfinger,#r-samllfinger{
height:35px;
width:15px;
border-radius:50%;
background:#fff;
position:relative;
top:195px;
left:66px;
transform:rotate(-40deg);
}
#r-samllfinger{
left:37px;
transform:rotate(40deg);
}
#left-leg,#right-leg{
height:170px;
width:90px;
border-radius:40% 30% 10px 45%;
background:#fff;
position:relative;
top:-640px;
left:-45px;
transform:rotate(-1deg);
z-index:-2;
margin:0 auto;
}
#right-leg{
border-radius:30% 40% 45% 10px;
top:-810px;
left:50px;
transform:rotate(1deg);
}
</style>
<body>

<div id="baymax">

<div id="head">
<div id="eye"></div>
<div id="eye2"></div>
<div id="mouth"></div>
</div>


<div id="torso">
<div id="heart"></div>

</div>


<div id="belly">
<div id="cover"></div>
</div>

<div id="left-arm">
<div id="l-bigfinger"></div>
<div id="l-samllfinger"></div>
</div>


<div id="right-arm">
<div id="r-bigfinger"></div>
<div id="r-samllfinger"></div>
</div>


<div id="left-leg"></div>


<div id="right-leg"></div>
</div>
</body>
</html>