CSS画卡通人物:哆啦A梦

哆啦A梦

HTML代码块

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>哆啦A梦</title>
		<link rel="stylesheet" type="text/css" href="css/doraemon.css"/>
	</head>
	<body>
		<div class="doraemon">
			<div class="head">
				<div class="face">
					<div class="eyes">
					 	<div class="left_eye"></div>
				     	<div class="right_eye"></div>
				    </div>
				    <div class="nose"></div>
				    <div class="mouth">

				    	<div class="cavity">
				    		<div class="left_tongue"></div>
				    	    <div class="right_tongue"></div>
				    	</div>
				    </div>
				    <div class="left_lip"></div>
				    <div class="right_lip"></div>
				    <div class="left-beards"></div>
				    <div class="right-beards"></div>
				</div>
			</div>
		    <div class="body">
		    	<div class="twitter">
		    		<div class="bell">
		    			<div class="point"></div>
		    		</div>
		    	</div>
		    	<div class="pockets"></div>
		    	<div class="left_hand"></div>
		    	<div class="right_hand"></div>
		    </div>
		    <div class="foot">
		    	<div class="left_foot"></div>
		    	<div class="right_foot"></div>
		    	<div class="pants"></div>
		    </div>
		</div>
	</body>
</html>

CSS代码块

 1.margin:auto;//水平居中

  2. justify-content:center;//水平居中

   align-items:center;//垂直居中 

   要和display:flex;一起使用

3.用到了float,transform,position定位 ,伪类:before,after

*{
  margin: 0;
  padding: 0;
}
html,body{
	width: 100%;
	height: 100vh;
	box-sizing: border-box;/*浏览器呈现出带有指定宽度和高度的框,并把边框和内边距放入框中。*/
	justify-content: center;/*水平居中*/
	align-items: center;/*垂直居中*/
	display: -webkit-flex;
}
.doraemon{
	width: 600px;
	height: 600px;
	/*border: 10px solid green;*/
}

/*头*/
.doraemon>.head{
	margin: auto;
	width: 320px;
	height: 320px;
	border: 2px solid black;
	border-radius: 50%;
	background: deepskyblue;
}

/*脸*/
.doraemon>.head>.face{
	margin: auto;
	width: 280px;
	height: 270px;
	border: 2px solid black;
	border-radius: 50%;
  background: white;
  transform: translateY(47px);
  z-index: -1;
}

/*眼睛*/
.doraemon>.head>.face>.eyes{
	margin: auto;
	width: 150px;/*眼睛盒子大小*/
	height: 80px;
	/*border: 2px solid black;*/
	display:flex;/*行样式显示*/
	transform: translateY(-32px);
	
}
.doraemon>.head>.face>.eyes>.left_eye{
	margin: auto;
	width: 60px;/*眼睛的大小*/
	height: 80px;
	border: 2px solid black;
	border-radius:50%;
	background:white;
	transform: translateX(7px);/*左眼向右移动*/
}
.doraemon>.head>.face>.eyes>.right_eye{
	margin: auto;
	width: 60px;
	height: 80px;
	border: 2px solid black;
	border-radius:50%;
	background:white;
	transform: translateX(-7px);/*右眼向左移动*/
}

/*眼珠*/
.doraemon>.head>.face>.eyes>*:before{
	margin:50% auto;
	content: "";
	display: block;
	width: 10px;
	height: 18px;
	border:2px solid black;
	border-radius: 50%;
	background: black;
}
.doraemon>.head>.face>.eyes>.left_eye:before{
	transform: translateX(10px);
}
.doraemon>.head>.face>.eyes>.right_eye:before{
	transform: translateX(-10px);
}

/*眼白*/
.doraemon>.head>.face>.eyes>*:after{
	margin:-70% auto;
	content: "";
	display: block;
	width: 3px;
	height: 3px;
	border:2px solid white;
	border-radius: 50%;
	background: white;
}
.doraemon>.head>.face>.eyes>.left_eye:after{
	transform: translateX(10px);
}
.doraemon>.head>.face>.eyes>.right_eye:after{
	transform: translateX(-10px);
}

/*鼻子*/
.doraemon>.head>.face>.nose{
	margin:auto;
	width:35px;
	height: 35px;
	border: 2px solid black;
	border-radius: 50%;
	background:crimson;
	transform: translateY(-53px);
}
.doraemon>.head>.face>.nose:before{
	content: "";
	display: block;
	width: 10px;
	height: 10px;
	border: 1px solid white;
	border-radius: 50%;
	background: white;
	transform: translate(3px ,4px);
}
.doraemon>.head>.face>.nose:after{
	content: "";
	display: block;
	width: 20px;
	height: 20px;
	border: 1px solid brown;
	border-radius: 50%;
	background:brown;
	transform: translate(9px ,0px);
}

/*嘴巴*/
.doraemon>.head>.face>.mouth{
	margin: auto;
	width: 200px;
	height: 110px;
	/*border: 2px solid black;*/
	overflow: hidden;
}

/*口腔*/
.doraemon>.head>.face>.mouth>.cavity{
	margin: auto;
	width: 200px;
	height: 250px;
	border: 2px solid black;
	border-radius:50% ;
	background:darkred;
	transform: translate(-2px,-57%);
	overflow: hidden;
}

/*舌头*/
.doraemon>.head>.face>.mouth>.cavity>.left_tongue{
	width: 100px;
	height: 125px;
	/*border: 2px solid black;*/
	border-radius:50% 50% 0 0;
	background: red;
	transform:  translate(30px,170px) rotate(-45deg);
}
.doraemon>.head>.face>.mouth>.cavity>.right_tongue{
	width: 100px;
	height: 125px;
	/*border: 2px solid black;*/
	border-radius:50% 50% 0 0;
	background: red;
	transform:  translate(70px,45px)  rotate(45deg);
}
/*嘴唇*/
.doraemon>.head>.face>.left_lip{
	margin: auto;
	width: 102px;
	height: 17px;
	border: 2px solid black;
    border-color:transparent transparent black black;
	border-radius:50% ;
	background: white;
	float: left;
	transform: translate(38px,-120px) rotate(-5deg);
	
	
}
.doraemon>.head>.face>.left_lip:before{
	content: "";
	display: block;
	width: 60px;
	height: 70px;
	border: 2px solid black;
	border-color:black transparent transparent black;
	border-radius:50% ;
	background: white;
	transform: translate(-29px,-62px) rotate(-32deg);
  
}
.doraemon>.head>.face>.right_lip{
	margin: auto;
	width: 102px;
	height: 17px;
	border: 2px solid black;
	border-color:transparent black black transparent;
	border-radius:50% ;
	background: white;
	float: right;
	transform: translate(-38px,-120px) rotate(5deg);
	
}
.doraemon>.head>.face>.right_lip:before{
	content: "";
	display: block;
	width: 60px;
	height: 70px;
	border: 2px solid black;
	border-color:black black transparent transparent;
	border-radius:50% ;
	background: white;
	transform: translate(66px,-62px) rotate(32deg);
}
.doraemon>.head>.face>.right_lip:after{
	content: "";
	display: block;
	width: 3px;
	height: 57px;
	background: black;
	transform: translate(-2px,-118px) rotate(-5deg);
}
/*胡须*/
.doraemon>.head>.face>.left-beards{
	width: 90px;
  height: 3px;
  background: black;
  transform: translate(0px,-170px) rotate(4deg);
  float: left;
}
.doraemon>.head>.face>.left-beards:before{
	content: " ";
	display: block;
	width: 85px;
  height: 3px;
  background: black;
  transform: translate(5px,-40px) rotate(20deg);
}
.doraemon>.head>.face>.left-beards:after{
	content: " ";
	display: block;
	width: 90px;
  height: 3px;
  background: black;
  transform: translate(5px,30px) rotate(-15deg);
}
.doraemon>.head>.face>.right-beards{
	width: 90px;
  height: 3px;
  background: black;
  transform: translate(0px,-170px) rotate(-4deg);
  float: right;
}
.doraemon>.head>.face>.right-beards:before{
	content: " ";
	display: block;
	width: 85px;
  height: 3px;
  background: black;
  transform: translate(0px,-40px) rotate(-20deg);
}
.doraemon>.head>.face>.right-beards:after{
	content: " ";
	display: block;
	width: 90px;
  height: 3px;
  background: black;
  transform: translate(-5px,30px) rotate(15deg);
}

/*身体*/
.doraemon>.body{
	margin: auto;
	width: 220px;
	height: 180px;
	border: 2px solid black;
	border-color: transparent black;
	border-radius:10%;
	background: deepskyblue;
	transform: translate(0px,-16px);
}

/*围脖*/
.doraemon>.body>.twitter{
	margin: auto;
	width: 192px;
	height: 16px;
	border: 2px solid black;
	border-radius:10% 10% 35% 35%;
	background: red;
	transform: translate(0px,-19px);
}

/*铃铛*/
.doraemon>.body>.twitter>.bell{
	margin: auto;
	width: 50px;
	height: 50px;
	border-radius:50% ;
	border: 2px solid black;
	background:yellow;
}
.doraemon>.body>.twitter>.bell:before{
	content: "";
	display: block;
	margin: auto;
	width: 66px;
	height: 50px;
	border-radius:50% ;
	border: 2px solid black;
	border-color:black transparent transparent;
	background: yellowellow;
	transform: translate(-10px, 10px) ;

}.doraemon>.body>.twitter>.bell:after{
	content: "";
	display: block;
	margin: auto;
	width: 66px;
	height: 50px;
	border-radius:50% ;
	border: 2px solid black;
	border-color:black transparent transparent;
	background: yellowellow;
	transform: translate(-10px, -50px) ;

}
.doraemon>.body>.twitter>.bell>.point{
	margin: auto;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	border: 2px solid black;
	background: brown;
  transform: translate(0px, -30px);
}
.doraemon>.body>.twitter>.bell>.point:after{
	content: "";
	display: block;
	margin: auto;
	width: 3px;
	height: 15px;
	background: black;
	transform: translate(0px, 10px);
}
/*口袋*/
.doraemon>.body>.pockets{
	margin: -39px auto;
	width: 180px;
	height: 170px;
	border: 2px solid black;
	border-radius:50% 50% 45% 45%;
	background: white;
	z-index: -1;
}
.doraemon>.body>.pockets:before{
	content: " ";
	display: block;
	margin: 25px auto;
	width: 120px;
	height: 120px;
	border:2px solid black ;
	border-radius: 50%;
	border-color:transparent  transparent black black; 
	transform: rotate(-45deg);
}
.doraemon>.body>.pockets:after{
	content: " ";
	display: block;
	margin: -107px auto;
	width: 120px;
	height: 20px;
	border-bottom:2px solid  black; 
}

/*手*/
.doraemon>.body>.left_hand{
	width: 140px;
	height: 50px;
	border: 2px solid black;
 	border-color: black  transparent  black transparent; 
	border-radius:70% 40% 40% 70% ;
	background: deepskyblue;
	z-index: -1;
	position: relative;
	top: -102px;
	left: -76px;
	transform: rotate(-45deg);
}
.doraemon>.body>.left_hand:before{
	content: " ";
	display: block;
	width: 50px;
	height: 50px;
	border: 2px solid black;
	border-radius:50% ;
	background: white;
	transform: translate(-30px,0px);
}
.doraemon>.body>.right_hand{
	width: 140px;
	height: 50px;
	border: 2px solid black;
 	border-color: black  transparent  black transparent; 
	border-radius:40% 70% 70% 40% ;
	background: deepskyblue;
	z-index: -1;
	position: relative;
	top: -215px;
	left: 188px;
	transform: rotate(-30deg);
}
.doraemon>.body>.right_hand:before{
	content: " ";
	display: block;
	width: 50px;
	height: 50px;
	border: 2px solid black;
	border-radius:50% ;
	background: white;
	transform: translate(105px,0px);
}
/*脚*/
.doraemon>.foot{
	margin: -16px auto;
	width:270px;
	height: 50px;
/*	border: 2px solid black;*/
}
.doraemon>.foot>*{
	width: 120px;
	height: 50px;
	border: 2px solid black;
	/*border-color: transparent black black black;*/
	background: white;
	z-index: -1;
	/*transform: translate(0px,-40px);*/
	position: relative;
  top: -15px;
}
.doraemon>.foot>.left_foot{
	border-radius:50% 50% 35% 50%;
	transform: rotate(-2deg);
	float: left;
}
.doraemon>.foot>.left_foot:before{
	content: " ";
	display: block;
	width:100px;
	height: 20px;
	border: 2px solid black;
	border-radius: 50%;
	background: deepskyblue;
	transform: translate(19px,-3px);
}
.doraemon>.foot>.right_foot{
	border-radius:50% 50% 50% 35%;
	float: right;
	transform: rotate(2deg);
}
.doraemon>.foot>.right_foot:before{
	content: " ";
	display: block;
	width:100px;
	height: 20px;
	border: 2px solid black;
	border-radius: 50%;
	background: deepskyblue;
	transform: translate(-3px,-2px);
}
/*裤子*/
.doraemon>.foot>.pants{
	margin: auto;
	width: 45px;
	height: 15px;
	border-radius:  50%;
	border: 2px solid;
	border-color:black   black  transparent black;
	background: white;
	z-index: 1;
}

 

 

 

 

 

  • 0
    点赞
  • 17
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
好的,下面是一个HTML+CSS哆啦A梦的示例: 1. 首先,我们需要一个HTML文件,可以使用以下代码: ``` <!DOCTYPE html> <html> <head> <title>哆啦A梦</title> <style> #doraemon { position: relative; width: 200px; height: 200px; background-color: #4d4d4d; border-radius: 100px; overflow: hidden; } #doraemon:before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #fff; border-radius: 100px; transform: translate(30px, 30px); } #doraemon .face { position: absolute; top: 30px; left: 30px; width: 140px; height: 140px; background-color: #fff; border-radius: 70px; overflow: hidden; } #doraemon .face:before { content: ""; position: absolute; top: 5px; left: 5px; width: 130px; height: 130px; background-color: #4d4d4d; border-radius: 65px; } #doraemon .face:after { content: ""; position: absolute; top: 50px; left: 50px; width: 40px; height: 40px; background-color: #fff; border-radius: 20px; } #doraemon .eyes { position: absolute; top: 50px; left: 70px; width: 60px; height: 45px; background-color: #000; border-radius: 30px; overflow: hidden; } #doraemon .eyes:before { content: ""; position: absolute; top: 5px; left: 5px; width: 50px; height: 35px; background-color: #fff; border-radius: 25px; } #doraemon .eyes:after { content: ""; position: absolute; top: 15px; left: 15px; width: 20px; height: 15px; background-color: #000; border-radius: 10px; } #doraemon .mouth { position: absolute; top: 110px; left: 40px; width: 120px; height: 50px; border-radius: 25px; border-top: 2px solid #000; background-color: #fff; transform: rotate(-20deg); } #doraemon .mouth:before { content: ""; position: absolute; top: 5px; left: 5px; width: 110px; height: 40px; background-color: #4d4d4d; border-radius: 20px; transform: rotate(20deg); } #doraemon .whiskers { position: absolute; top: 75px; left: 50px; width: 100px; height: 1px; background-color: #000; transform: rotate(10deg); } #doraemon .whiskers:before { content: ""; position: absolute; top: -5px; left: 0; width: 5px; height: 10px; background-color: #000; transform: rotate(-20deg); } #doraemon .whiskers:after { content: ""; position: absolute; top: 5px; left: 0; width: 5px; height: 10px; background-color: #000; transform: rotate(-20deg); } #doraemon .whiskers:nth-child(2) { transform: rotate(-10deg); } #doraemon .whiskers:nth-child(2):before { transform: rotate(20deg); } #doraemon .whiskers:nth-child(2):after { transform: rotate(20deg); } #doraemon .whiskers:nth-child(3) { transform: rotate(10deg); } #doraemon .whiskers:nth-child(3):before { transform: rotate(-20deg); } #doraemon .whiskers:nth-child(3):after { transform: rotate(-20deg); } </style> </head> <body> <div id="doraemon"> <div class="face"></div> <div class="eyes"></div> <div class="mouth"></div> <div class="whiskers"></div> <div class="whiskers"></div> <div class="whiskers"></div> </div> </body> </html> ``` 2. 接下来,我们来解释一下上面的代码: - 通过`position: relative`设置`#doraemon`为相对定位,以便于后面的绝对定位。 - 设置`width`和`height`为200px,使得`#doraemon`呈现为一个圆形。 - 设置`background-color`为#4d4d4d,使得`#doraemon`呈现为蓝色。 - 通过`border-radius: 100px`将`#doraemon`设置为圆形。 - 通过`overflow: hidden`将`#doraemon`内部的元素裁剪为圆形。 3. 接下来,我们需要用伪元素`::before`来实现哆啦A梦的脸部分: - 通过`content: ""`设置伪元素的内容为空。 - 通过`position: absolute`将伪元素绝对定位在`#doraemon`内部。 - 通过`top`和`left`属性将伪元素相对于`#doraemon`进行定位。 - 通过`width`和`height`设置伪元素的大小。 - 通过`background-color`设置伪元素的颜色。 - 通过`border-radius`将伪元素设置为圆形。 - 通过`transform: translate(30px, 30px)`将伪元素向右下方平移,实现哆啦A梦的脸颊。 4. 接下来,我们需要用`div`元素来实现哆啦A梦的眼睛: - 通过`position: absolute`将眼睛绝对定位在脸部内部。 - 通过`top`和`left`属性将眼睛相对于脸部进行定位。 - 通过`width`和`height`设置眼睛的大小。 - 通过`background-color`设置眼睛的颜色。 - 通过`border-radius`将眼睛设置为半圆形。 - 通过`overflow: hidden`将眼睛内部的元素裁剪为半圆形。 5. 接下来,我们需要用伪元素`::before`来实现哆啦A梦的眼珠: - 通过`content: ""`设置伪元素的内容为空。 - 通过`position: absolute`将伪元素绝对定位在眼睛内部。 - 通过`top`和`left`属性将伪元素相对于眼睛进行定位。 - 通过`width`和`height`设置伪元素的大小。 - 通过`background-color`设置伪元素的颜色。 - 通过`border-radius`将伪元素设置为圆形。 6. 接下来,我们需要用`div`元素来实现哆啦A梦的嘴巴: - 通过`position: absolute`将嘴巴绝对定位在脸部内部。 - 通过`top`和`left`属性将嘴巴相对于脸部进行定位。 - 通过`width`和`height`设置嘴巴的大小。 - 通过`border-radius`将嘴巴设置为半圆形。 - 通过`border-top`设置嘴巴的上边框。 - 通过`background-color`设置嘴巴的颜色。 - 通过`transform: rotate(-20deg)`将嘴巴旋转20度,使得它看起来更加生动。 7. 最后,我们需要用`div`元素和伪元素来实现哆啦A梦的小胡须: - 通过`position: absolute`将小胡须绝对定位在脸部内部。 - 通过`top`和`left`属性将小胡须相对于脸部进行定位。 - 通过`width`和`height`设置小胡须的大小。 - 通过`background-color`设置小胡须的颜色。 - 通过`transform: rotate(10deg)`将小胡须旋转10度,使得它看起来更加生动。 - 通过伪元素来实现小胡须的两端。 到这里,一个HTML+CSS哆啦A梦就完成了。希望这个示例对你有所帮助!
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值