实验楼：纯css打造 BayMan（大白）

最新推荐文章于 2024-05-09 11:25:18 发布

hhvfg

最新推荐文章于 2024-05-09 11:25:18 发布

阅读量295

点赞数

CC 4.0 BY-SA版权

分类专栏： html css 文章标签：大白

本文链接：https://blog.youkuaiyun.com/qq_33015081/article/details/79191975

html 同时被 2 个专栏收录

2 篇文章

订阅专栏

css

1 篇文章

订阅专栏

本文介绍了一个使用纯CSS实现的大白角色绘制项目。通过相对定位和z-index属性的应用，展示了如何仅使用CSS创建一个有趣的角色形象。项目包括头部、身体等部分，并提供了完整的HTML和CSS代码。

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

该小项目是实验楼的一个实验吧，用纯css代码，画出了大白，还是很有意思的。用到的知识点很简单，就是相对定位的应用，通过这个小项目，对定位的理解更加深入，也补了一个坑，就是z-index这个属性只能对声明定位的元素起作用，纠结了好一会。

还有一个，就是昨晚心血来潮的思考着“技术”这个词的定义，我认为大部分人把这个词看的太高了，我认为，对于个人而言，就是我所知道的而不为大多数人所知的能够解决特定问题的方法，就是技术。

html代码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>BayMax</title>
	<link rel="stylesheet" href="./style.css">

</head>
<body>
	<div id="BayMax">
		<div id="head">
			<div id="eye1"></div>
			<div id="eye2"></div>
			<div id="mouth"></div>
		</div>

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

		<div id="belly">
			<div id="cover"></div>
		</div>
		<div id="leftarm">
			<div id="l-bigfinger"></div>
			<div id="l-smallfinger"></div>
		</div>
		
		<div id="rightarm">
			<div id="r-bigfinger"></div>
			<div id="r-smallfinger"></div>
		</div>
		
		<div id="leftleg"></div>
		<div id="rightleg"></div>

	</div>
	
</body>
</html>

css：

body{
	background-color: #595959;

}

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

#head{
	margin: 0 auto;
	background-color: #fff;
	width: 100px;
	height: 64px;
	border-radius: 50%;
	margin-bottom: -20px;
	border-bottom: 5px solid #e0e0e0;
	z-index:100;
	position: relative;
}


#eye1,#eye2{
	background-color: #282828;
	width: 11px;
	height: 13px;
	position: relative;
	border-radius: 50%;
	transform: rotate(8deg);
	top: 30px;
	left: 27px;
}

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

#mouth{
	width: 38px;
	height: 1.5px;
	position: relative;
	top: 10.5px;
	left: 34px;
	background-color: #282828;

}

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

#heart{
	background-color: #fff;
	position: relative;
	top: 60px;
	left: 120px;
	width: 25px;
	height: 25px;
	z-index: 7;
	border-radius:50%;
	border: 1px solid #ccc;
	box-shadow: 2px 5px 2px #ccc inset;
}



#belly{
	width: 245px;
	height: 300px;
	z-index: 5;
	margin-top:-140px;
}

#cover {
    width: 190px;
    background: #fff;
    height: 150px;
    margin: 0 auto;
    position: relative;
    top: -20px;
    border-radius: 50%;
    z-index: 6;
}

#leftarm,#rightarm{
	width: 120px;
	height:270px;
	position: relative;
	background-color: #fff;
	border-radius: 50%;
	margin: 0 auto;
	top: -350px;
	left: -100px;
	transform: rotate(20deg);
	z-index: -1;

}

#rightarm{
	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 {
    left: 50px;
    transform: rotate(50deg);
}

#l-smallfinger,
#r-smallfinger {
    height: 35px;
    width: 15px;
    border-radius: 50%;
    background: #fff;
    position: relative;
    top: 195px;
    left: 66px;
    transform: rotate(-40deg);
}

#r-smallfinger {
    background: #fff;
    transform: rotate(40deg);
    top: 195px;
    left: 37px;
}


#leftleg,#rightleg {
    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;
}

#rightleg {
    background: #fff;
    border-radius:30% 40% 45% 10px;
    margin: 0 auto;
    top: -810px;
    left: 50px;
    transform: rotate(1deg);
}

效果图如下：