CSS画卡通人物：哆啦A梦

最新推荐文章于 2022-05-12 18:43:14 发布
最新推荐文章于 2022-05-12 18:43:14 发布
阅读量1.6k 收藏 17
点赞数
分类专栏： web开发——作品 文章标签： css html css3 html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44645934/article/details/105472294
版权

哆啦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
    评论
专栏目录
CSS3卡通人物奔跑动画特效.zip
07-03
CSS3卡通人物奔跑动画特效是一款基于HTML5 CSS3实现的超可爱卡通人物路上奔跑动画效果。
CSS：动画带代码详解
xugenyin的博客
12-15 839
动画是多种状态之间的转换 通过属性animation实现 不需要触发条件
图文学习前端Flex布局
程序员哆啦A梦，蓝胖子
01-11 720
哪吒人生信条：如果你所学的东西 处于喜欢 才会有强大的动力支撑。 把你的前端拿捏得死死的，每天学习得爽爽的，关注这个不一样的程序员，如果你所学的东西 处于喜欢 才会有强大的动力支撑。 感谢不负每一份热爱前端的程序员，不论前端技能有多奇葩，欢迎关注加我入群vx:xiaoda0423 前言 本篇文章进行学习css中的一个重点应用，布局样式为flex布局，相信你学习了解过display属性，position属性，float属性，但今天只学习新东西就是flex布局。 flex布局是什么 flex是flexib
webSocket与ajax、webSocket API、webSocket原理、socket io、聊天室
weixin_34032779的博客
08-02 151
为什么80%的码农都做不了架构师？>>> ...
折腾毕设记（二）—— 用户注册登录
weixin_33769207的博客
10-07 692
前言上回讲述了我搭建好了部分开发环境，从这一章开始，就要动手写代码了。一个像样的网站要有注册登录功能。所以今天讲一讲，我是如何设计开发毕设的登录注册的，效果如下方所示那么，整理一下本次的开发目标。开发目标打开毕设网站就显示登录页面（vue-router）注册和登陆的页面设计（采用element-ui）登录页面和注册页面之间的路由跳转（vue-router）注册页面的动态设计和与服务器的通讯（vue...
使用CSS3绘制简单的Android机器人
Evan_QB的博客
10-07 1294
html CSS部分 body{ margin: 0; padding: 0; background-color: #f7f7f7; } .board{ wid
CSS画卡通人物：皮卡丘
qq_44645934的博客
04-13 1894
皮卡丘 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Pikachu</title> <link rel="stylesheet" href="css/Pikachu.css" /> </head> ...
用css画一个卡通形象-小猪佩奇
muzidigbig的博客
04-03 1593
最近在腾讯云技术社区遇到了一位奇才，用css画出了一个社会人小猪佩奇，不得不服。研究了一下他的文章https://segmentfault.com/a/1190000014909658，感觉甚是有趣，果断收藏。 效果： <!DOCTYPE html> <html> <head> <title>用css画一个小猪佩奇</titl...
Css简单动画实现蔡徐坤跳舞
热门推荐
qq_41640555的博客
08-17 1万+
(学习css动画突发奇想做的。) <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <met...
纯CSS画图——哆啦A梦
cily
06-24 6817
最近突然想用前端代码画图，然后就去百度找了一张哆啦A梦的图片，用DIV+CSS画，虽然最后的结果还是有些差异，不过也就差不多可以看啦~ dlam.html 哆啦A梦
八种炫酷纯CSS加载动画代码
weixin_43923808的博客
05-12 7292
加载1CSS源码.title{ width: 100%; text-align: center; margin:60px 0; font-size: 18px; color: #999; } .loadingOne{ width: 80px; height: 40px; margin: 0 auto; } .loadingOne span{ display: inline-block; width: 8px; hei..
css3-doraemon.rar_html5_html5 css3_html5画哆啦a梦
09-20
在其他网站下到的一个用css3+html5画出来的多啦A梦，和大家分享一下。很不错的代码
CSS3绘制哆啦A梦头像动画代码.zip
07-11
CSS3绘制哆啦A梦头像动画代码，鼠标移动到头像区域表情有变化。
纯CSS3绘制哆啦A梦头像动画代码
09-08
纯CSS3绘制哆啦A梦头像动画代码
CSS画出一个可爱神奇的多啦A梦
09-27
想不想拥有可爱的多啦A梦，这篇文章主要教大家使用CSS画出一个可爱神奇的多啦A梦,感兴趣的小伙伴们可以参考一下
纯css3绘图哆啦a梦机器猫头像特效
11-24
纯css3绘图哆啦a梦机器猫头像特效
复习题
weixin_38292678的博客
09-21 3085
Cookie是由服务器端生成的，发送给User-Agent（一般是浏览器），（服务器告诉浏览器设置一下Cookie），浏览器会将cookie以key/value 的形式保存在某个目录下的文本文件内，下一次请求同一网站时就发送该Cookie服务器（前提是浏览器设置Cookie） 为什么会有Cookie？ http是无状态协议 状态都是由Cookie来控制的 Cookie的特点 1.有生命周期 2....
网址备忘录
sinat_35444807的博客
10-31 1046
Bookmarks 前端学习 HTML canvas three.js Noise - value - 2D (1条消息) three.js script vertex和fragment在react中使用/纯js写法_草宝虫的博客-CSDN博客 texture = new THREE.TextureLoader().load()引入纹理，图片应该放在vue脚手架中的哪块 - SegmentFault 思否 Three.js – JavaScript 3D Library 前
一个合格的中级前端工程师需要掌握的技能笔记（上）
程序员哆啦A梦，蓝胖子
05-29 3968
Github来源：一个合格的中级前端工程师需要掌握的技能 | 求星星 ✨ | 给个❤️关注，❤️点赞，❤️鼓励一下作者大家好，我是魔王哪吒，很高兴认识你~~哪吒人生信条：如果你所学的东西 ...
用HTML+css画一个哆啦a梦
最新发布
06-08
好的，下面是一个用HTML+CSS画哆啦A梦的示例： 1. 首先，我们需要一个HTML文件，可以使用以下代码： ``` <!DOCTYPE html> 哆啦A梦 #doraemon { position: relative; width: 200px; height: 200px;...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值