css——哆啦A梦

Uddddr

已于 2022-05-10 20:50:01 修改

阅读量1.1k

点赞数 7

分类专栏： HTML 文章标签： css 前端 css3

于 2022-05-10 18:55:31 首次发布

本文链接：https://blog.csdn.net/weixin_52651213/article/details/124694753

版权

HTML 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

这篇博客展示了一位初学者如何使用CSS来绘制哆啦A梦，包括头部、眼睛、鼻子、腮红、胡子、嘴巴等细节。通过HTML结构和CSS样式，实现了哆啦A梦的头部和身体各部位的造型，虽然书的部分采用了图片，但整体效果生动有趣。代码实现详尽，适合前端初学者参考学习。

摘要由CSDN通过智能技术生成

课堂小作业，用css画一只哆啦A梦，分为两部分，主页部分index、样式部分css

由于太菜所以书的部分直接用抠图，嘴巴部分简单的实现了一下。

话不多说上原图

代码实现部分如下：

一、index页面：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<!-- 	导入式 -->
		<link href="./css/index.css" rel="stylesheet">
			<link href="./css/dlam.css" rel="stylesheet">
		<style>
			body{
				display: flex;
				justify-content: center;
			}

		</style>
	</head>
	<body>
		<!-- 哆啦A梦 -->
		<div class="dlam">
			<!-- 头部 -->
			<div class="head">
				<!-- 白色的脸部 -->
				<div class="white_face">
					
					<!-- 眼睛 -->
					<div class="eyes">
						<!-- 左眼 -->
						<div class="left_eye">
							<div class="y1"></div>
						</div>
						<!-- 右眼 -->
						<div class="right_eye">
							<div class="y2">
								<div class="y3"></div>
							</div>
						</div>
					</div>
					
					<!-- 鼻子 -->
					<div class="nose">
						<div class="red_nose"></div>
						<div class="white_nose"></div>
						<div class="vertical_nose"></div>
					</div>
					
					<!-- 腮红 -->
					<div class="pink">
						<div class="p1"></div>
						<div class="p2"></div>
					</div>
					
					<!-- 胡子 -->
					<div class="beard">
						<!-- 左胡子 -->
						<div class="left_beard">
							<div class="x1"></div>
							<div class="x2"></div>
							<div class="x3"></div>
						</div>
						<!-- 右胡子 -->
						<div class="right_beard">
							<div class="x4"></div>
							<div class="x5"></div>
							<div class="x6"></div>
						</div>
					</div>



					<!-- 嘴巴 -->
					<div class="mouth">
						<div class="mouth1"></div>
					</div>
					
					<!-- 脖子 -->
					<div class="neck"></div>
										
				</div>		
			</div>
			
			<!-- 身体 -->
			<div class="body">
				<!-- 白肚子 -->
				<div class="white_body"></div>
				
				
				<!-- 书 -->
				<div class="book"></div>
				
				<!-- 饮料 -->
				<div class="drink">
					<div class="cup"></div>
					<div class="straw"></div>
					<div class="water"></div>
				</div>
				
				<!-- 手 -->
				<div class="hand"></div>
				
				<!-- 书 -->
				<div class="book">
					<img src="img/book.png">
				</div>
				
			</div>
		</div>
	</body>
</html>

二、css页面：

.dlam {
	width: 800px;
	height: 800px;
	background-color: #e5e8c8;
}

.head {
	position: relative;
	top: 10%;
	left: 30%;
	width: 400px;
	height: 350px;
	border: 0.5px #7b5158 solid;
	background-color: rgb(177, 214, 254);
	border-radius: 50% 50% 30% 35% / 55% 55% 45% 45%;
}

.white_face {
	position: absolute;
	width: 350px;
	height: 260px;
	border: 0.5px #7b5158 solid;
	background-color: #FFFFFF;
	border-radius: 50% 50% 25% 40% / 55% 65% 45% 50%;
	bottom: 0px;
	left: 10px;
}

.left_eye {
	position: relative;
	width: 80px;
	height: 100px;
	border-radius: 50%;
	border: 0.5px #7b5158 solid;
	background-color: #FFFFFF;
	float: left;
	top: -40px;
	left: 71px;
}

.y1 {
	position: absolute;
	width: 20px;
	height: 10px;
	border-bottom-left-radius: 100px;
	border-bottom-right-radius: 100px;
	border-left: 10px solid #7b5158;
	border-right: 10px solid #7b5158;
	border-bottom: 10px solid #7b5158;
	transform: rotate(180deg);
	top: 64px;
	left: 30px;
}

.right_eye {
	position: relative;
	width: 85px;
	height: 110px;
	border-radius: 50%;
	border: 0.5px #7b5158 solid;
	background-color: #FFFFFF;
	float: left;
	top: -40px;
	left: 71px;
	transform: rotate(-10deg);
}

.y2 {
	position: absolute;
	width: 30px;
	height: 40px;
	background: #7b5158;
	border-radius: 50%;
	top: 70px;
	left: 30px;
	transform: rotate(15deg);
}

.y3 {
	position: absolute;
	width: 8px;
	height: 15px;
	background: #ffffff;
	border-radius: 50%;
	top: 20px;
	left: 15px;
	transform: rotate(5deg);
}

.red_nose {
	position: absolute;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: #ed4b4d;
	border: 0.5px #7b5158 solid;
	top: 45px;
	left: 120px;
}

.white_nose {
	position: absolute;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: #ffffff;
	top: 53px;
	left: 130px;
	z-index: 10;
}

.vertical_nose {
	position: absolute;
	width: 125px;
	height: 10px;
	top: 140px;
	left: 85px;
	transform: rotate(85deg);
	border-bottom: 3px solid #7b5158;
	border-radius: 50%;
}

.p1 {
	position: absolute;
	width: 90px;
	height: 90px;
	border-radius: 50%;
	background-color: #ffb8bc;
	top: 60px;
	left: 20px;
	-webkit-filter: blur(10px);
	-moz-filter: blur(10px);
	-o-filter: blur(10px);
	-ms-filter: blur(10px);
	filter: blur(10px);
}

.p2 {
	position: absolute;
	width: 100px;
	height: 100px;
	border-radius: 50%;
	background-color: #ffb8bc;
	top: 50px;
	left: 215px;
	-webkit-filter: blur(10px);
	-moz-filter: blur(10px);
	-o-filter: blur(10px);
	-ms-filter: blur(10px);
	filter: blur(10px);
}

.x1 {
	position: absolute;
	width: 80px;
	height: 1px;
	background-color: #7b5158;
	transform: rotate(15deg);
	top: 80px;
	left: -5px;
}

.x2 {
	position: absolute;
	width: 90px;
	height: 1px;
	background-color: #7b5158;
	transform: rotate(5deg);
	top: 110px;
	left: -20px;
}

.x3 {
	position: absolute;
	width: 100px;
	height: 1px;
	background-color: #7b5158;
	transform: rotate(-10deg);
	top: 140px;
	left: -30px;
}

.x4 {
	position: absolute;
	width: 110px;
	height: 1px;
	background-color: #7b5158;
	transform: rotate(-10deg);
	top: 80px;
	left: 250px;
}

.x5 {
	position: absolute;
	width: 105px;
	height: 1px;
	background-color: #7b5158;
	transform: rotate(-5deg);
	top: 105px;
	left: 250px;
}

.x6 {
	position: absolute;
	width: 90px;
	height: 1px;
	background-color: #7b5158;
	transform: rotate(8deg);
	top: 135px;
	left: 250px;
}

.mouth1 {
	position: absolute;
	width: 180px;
	height: 100px;
	top: 110px;
	left: 70px;
	border-bottom: 4px solid #7b5158;
	border-radius: 50%;
	transform: rotate(-5deg);
}



.neck {
	position: absolute;
	width: 220px;
	height: 30px;
	background: #e8484d;
	top: 245px;
	left: 85px;
	transform: rotate(180deg);
	border-radius: 80% 80% 55% 40% / 50% 50% 50% 50%;
}

.body{
	position: relative;
	width: 280px;
	height: 80px;
	background-color: #b1d6fe;
	top: 80px;
	left: 300px;
	border-top-left-radius: 50px;
	border-top-right-radius: 50px;
}

.white_body{
	position: absolute;
	width: 220px;
	height: 80px;
	background-color: #ffffff;
	left: 30px;
	border-top-left-radius: 50px;
	border-top-right-radius: 50px;
}


.cup{
	position: absolute;
	width: 90px;
	height: 80px;
	background-color: #e5e8c8;
	border: 0.5px #7b5158 solid;
	left: -90px;
	top: 10px;
	border-bottom-left-radius: 20px;
	border-bottom-right-radius: 20px;
}

.straw{
	position: absolute;
	width: 10px;
	height: 140px;
	top: -80px;
	left: -20px;
	background-color: #f2ff98;
	border: 0.5px #7b5158 solid;
	transform: rotate(30deg);
}

.water{
	position: absolute;
	width: 90px;
	height: 50px;
	background-color: #ffc560;
	border: 0.5px #7b5158 solid;
	left: -90px;
	top: 40px;
	border-bottom-left-radius: 20px;
	border-bottom-right-radius: 20px;
}

.hand{
	position: absolute;
	width: 50px;
	height: 50px;
	background-color: #ffffff;
	border: 0.5px #7b5158 solid;
	border-radius: 50%;
	top: 60px;
	left: -120px;
}

.book{
	position:absolute;
	top: -650px;
	left: -700px;
}

由于书的部分是抠出来的，所以记得把书的图像放在img文件夹中

上抠图：