利用HTML+CSS制作一个哆啦A梦

最新推荐文章于 2024-09-17 22:13:17 发布
最新推荐文章于 2024-09-17 22:13:17 发布
阅读量242 收藏
点赞数 6
文章标签： css html 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_68441705/article/details/141140501
版权

 制作出来的效果如下图所示：

 

 完整代码实现：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.whole{
				/* border:1px solid black; */
				position: absolute;
			}
			.head{
				border:2px solid black;
				width: 330px;
				height: 330px;
				background-color: #0ab2d9;
				margin-left: 150px;
				margin-top: 50px;
				border-radius:100%;
				background-image: -moz-radial-gradient(99% 1%, #fff, #0C99C7 75%, black 100%);
			}
			.face{
				border:2px solid black;
				width: 280px;
				height: 250px;
				margin-left: 26px;
				margin-top: -40px;
				background-color: #fff;
				border-radius:90%;
				/* position: absolute;
				 z-index:0; */
			}
			.leye{
				border:2px solid black;
				width: 80px;
				height: 90px;
				margin-left: 90px;
				margin-top: 40px;
				background-color: #fff;
				border-radius:35px 35px 35px 35px;
				position: relative
			}
			.reye{
				border:2px solid black;
				width: 80px;
				height: 90px;
				margin-left: 170px;
				margin-top: -91px;
				background-color: #fff;
				border-radius:35px 35px 35px 35px;
				position: relative
			}
			
			.leyeball{
				border:2px solid black;
				width: 10px;
				height: 10px;
				margin-left: 140px;
				margin-top: -40px;
				background-color: #000;
				border-radius:35px 35px 35px 35px;
				position: relative
			}
			.reyeball{
				border:2px solid black;
				width: 10px;
				height: 10px;
				margin-left: 186px;
				margin-top: -12px;
				background-color: #000;
				border-radius:35px 35px 35px 35px;
				position: relative
			}
			.nose{
				border:2px solid black;
				width: 28px;
				height: 28px;
				margin-left: 155px;
				margin-top: -200px;
				
				border-radius:35px 35px 35px 35px;
				position: relative
				background-color: w;
				background-image: radial-gradient(white, #d46835, #c83f00);
				
			}
			.whiskers{
				width: 70px;
				height: 1px;
				border: 0.1px solid black;
				background-color: black;
				position: relative
			}
			.lf{
				
			    position: relative;
			    top: -196px;
			    left: 39px;
			    transform: rotate(15deg);
			}
			.ls{
			    position: relative;
			    top: -179px;
			    left: 40px;
			}
			.lt{
				position: relative;
				top: -160px;
				left: 40px;
				transform: rotate(-15deg);
			}
			.rf{
			    position: relative;
			    top: -204px;
			    left: 214px;
			    transform: rotate(-15deg);
			}
			.rs{
			    position: relative;
			    top: -186px;
			    left: 214px;
			}
			.rt{
				position: relative;
				top: -169px;
				left: 214px;
				transform: rotate(15deg);
			}
			.m1{
				width: 1px;
				height: 84px;
				border: 0.1px solid black;
				left: 168px;
				top: -2px;
				background-color: black;
				position: relative
			}
			.m2{
				width: 145px;
				height: 115px;
				border-radius: 100px;
				border-bottom: 1px solid black;
				position: relative;
				left: 93px;
				top: -116px;			        
			}
			.tie{
		        width: 290px;
		        height: 25px;
		        border-radius: 100px;
		        border: 2px solid #000;
		        background-image: linear-gradient(to top, #640C04, #B13206);
		        position: relative;
		        left: 172px;
		        top: -58px;
		        z-index: 20;		
			}
			.bell{
		        width: 36px;
		        height: 36px;
		        border-radius: 18px;
				background-color: #e3df17;
		        
		        border: 2px solid #000;
		        position: relative;
		        left: 300px;
		        top: -78px;
		        z-index: 30;		
			}
			.b1{
		        width: 34px;
		        height: 3px;
		        border: 2px solid #000;
		        border-top-left-radius: 3px;
		        border-top-right-radius: 4px;
		        background-color: none;
		        position: relative;
		        top: 9px;
		        left: -1px;		
			}
			.b2{
		        width: 10px;
		        height: 10px;
		        background-color: #000;
		        position: relative;
				border-radius: 100% ;
		        left: 13px;
		        top: 10px;		
			}
			.b3{
		        width: 2px;
		        height: 10px;
		        background-color: #000;
		        position: relative;
		        left: 16px;
		        top: 10px;		
			}
			.belly{
		        width: 160px;
		        height: 160px;
		        border-radius: 75px;
		        background-color: #fff;
		        border: 2px solid #000;
		        position: relative;
		        left: 40px;
		        top: -25px;		
				
				     
			}
			.pocket{
				width: 130px;
				height: 65px;
				/* border-radius: 60px; */
				border-radius: 0px 0px 120px 120px ;
				background-color: #fff;
				border: 2px solid #000;
				position: relative;
				/* position: absolute;
				z-index: 15; */
				left: 15px;
				top: 70px;   
			}
			.leg{
		        width: 243px;
		        height: 170px;
		        background-color: #07abdd;
		        border: 2px solid #333;
		        position: relative;
		        top: -100px;
		        left: 194px;
		        z-index: 10;
				/* border-left: 2px solid black; */
				border-image: -webkit-linear-gradient(top, transparent 50%, black 50%, black 100%) 1;
			}
			.arm{
				width: 110px;
				height: 57px;
				background-color: #07abdd;
				border: 2px solid #333;
				position: relative;
				
				transform-origin: 0 50%;
			}
			.larm{
				top: -228px;
				left: 113px;			    
				transform: rotate(-30deg);	
				box-shadow: -5px 2px 10px 2px #333;
			}
			.rarm{
				top: -342px;
				left: 423px;
				transform: rotate(30deg);
			}
			.hand{
				width: 70px;
				height: 70px;
				border-radius: 35px;
				border: 2px solid #333;
				background-color: #fff;
				position: relative;
			}
			.lhand{
				left: 62px;
				top: -350px;				    
			}
			.rhand{			
				left: 487px;
				top: -418px;		
			}
			.ll{
		        width: 20px;
		        height: 20px;
		        border-radius: 10px ;
		        border-radius: 10px 10px 0px 0px ;
		        background-color: #fff;
		        border: 2px solid #333;
		        position: absolute;
		        left: 110px;
		        top: 150px;
		        z-index: 15;		
			}
			.foot{
				width: 132px;
				height: 33px;
				border: 2px solid #333;
				background-color: #fff;
				position: relative;
			}
			.lfoot{
				border-top-right-radius: 45px;
				border-bottom-right-radius: 45px;
				border-top-left-radius: 65px;
				border-bottom-left-radius: 45px;				
				left: 172px;
				top: -384px;
				z-index: 15;
				box-shadow: -1px 0px 10px 2px #333;
				        
			}
			.rfoot{		        
		        border-top-right-radius: 65px;
		        border-bottom-right-radius: 45px;
		        border-top-left-radius: 45px;
		        border-bottom-left-radius: 45px;
		        left: 327px;
		        top: -420px;
		        z-index: 15;
		        /* box-shadow: -1px 1px 10px 2px #333;	 */	
			}
		</style>
	</head>
	<body>
		<div class="whole">
			<div class="head">
				<div class="eye">
					<div class="leye"></div>
					<div class="reye"></div>
				</div>
				<div class="eyeball">
					<div class="leyeball"></div>
					<div class="reyeball"></div>
				</div>
				<div class="face"></div>
				<div class="nose"></div>
				<div class="mouse">
					<div class="m1"></div>
					<div class="m2"></div>
				</div>
					<div class="whiskers lf"></div>
					<div class="whiskers ls"></div>
					<div class="whiskers lt"></div>
					<div class="whiskers rf"></div>
					<div class="whiskers rs"></div>
					<div class="whiskers rt"></div>
			</div>
			<div class="body">
				<div class="tie"></div>
				<div class="bell">
					<div class="b1"></div>
					<div class="b2"></div>
					<div class="b3"></div>
				</div>
				
				
				<div class="leg">
					<div class="belly">
						<div class="pocket"></div>
					</div>
					<div class="ll"></div>
				</div>
				<!-- <div class="arm"> -->
					<div class="arm larm"></div>
					<div class="arm rarm"></div>
				<!-- </div> -->
				<!-- <div class="hand"> -->
					<div class="hand lhand"></div>
					<div class="hand rhand"></div>
				<!-- </div> -->
				
				<!-- <div class="foot"> -->
					<div class="foot lfoot"></div>
					<div class="foot rfoot"></div>
				<!-- </div> -->
			</div>
		</div>
		
	</body>
</html>

熬夜学习行不行
关注
纯HTML5+CSS3仿B站首页
weixin_48493613的博客
08-15 8605
纯HTML5+CSS3仿B站首页
H5+css3 制作多啦A梦
10-24
在本项目中，“H5+CSS3 制作多啦A梦”是一个关于前端开发的实践教程，主要利用HTML5和CSS3技术来创建一个视觉上代表哆啦A梦的网页元素。HTML5是现代网页制作的基础，而CSS3则是为网页添加样式、动画和布局的重要工具...
用基础的HTML和CSS画出一个哆啦A梦
weixin_45172028的博客
08-16 1383
利用html和css中的定位和css3的2D转换属性，画出一个蓝胖子。
用HTML+CSS做一个漂亮简单的个人网页（第二篇）
热门推荐
qq_42523321的博客
06-10 3万+
个人网页设计及代码
302.哆啦A梦动漫主题网页 大学生期末大作业 Web前端网页制作 html5+css+js
A240307的博客
06-15 1291
本实例应用html5+css+js：菜单栏、图片轮翻效果、留言表单等。适用于大学生网页课程作业设计、公司网页制作等。本网页支持如Dreamweaver、HBuilder、Text 、Vscode 等任意html编辑软件进行编辑修改；支持包括IE、Firefox、Chrome、Safari主流浏览器浏览。
HTML5利用canvas画布绘制哆啦A梦
明哥
03-16 922
效果图： 源码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>蓝胖子</title> <style> canvas { display:block; margin:0 auto; } </style
HTML:视频播放器（html+css+javascript）
qq_58203144的博客
05-16 1944
目录一、作品展示二、代码实现三、文件目录 一、作品展示 二、代码实现 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-sc
HTMLCSS学习笔记（二十四）——利用border属性制作太极图与哆啦A梦
qq_45268602的博客
08-17 192
旋转太极图 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>太极图</title> <style> *{ ma
网页学习笔记（全）Html+Css+Js+JQuery
qq_37959151的博客
11-11 3181
前段笔记 (一)安装vscode 安装：插件 chinese 汉化 open-in-browser ---> 启用 设置自动保存：文件 —> 自动保存 (二)认识页面结构： Emmet：? 直接出结构： ！ <!-- 注释 快捷键 ctrl + / --> <!-- 按照h5的标准解析网页 --> <!DOCTYPE html> <!-- 根标签 一个网页从html标签开始 --> <html lang="en"> <he
教你如何利用canvas画布绘制哆啦A梦
qq_39155611的博客
06-12 3345
教你如何利用canvas画布绘制哆啦A梦 最近一直在练习使用canvas画布标签，今天教大家如何使用canvas画布绘制哆啦A梦。如图： HTML代码： <canvas id="my_canvas"></canvas> CSS代码： canvas { display:block; margin:0 auto; background: pink } JavaScript代码：
css3-doraemon.rar_html5_html5 css3_html5画哆啦a梦
09-20
今天，我们将深入探讨一个有趣的示例——利用HTML5和CSS3技术绘制哆啦A梦，以此来阐述这两项技术的精髓所在。 HTML5作为新一代的超文本标记语言，它增强了网页的语义化，提供了更好的多媒体支持，并引入了离线存储...
超级简单丨用最基础的css做出来的哆啦A梦头像
05-23
【标题】"超级简单丨用最基础的CSS做出来的哆啦A梦头像"揭示了本次主题是关于使用CSS（层叠样式表）这一前端技术，制作哆啦A梦头像的教学内容。对于初学者或者对CSS有0基础的人来说，这个项目是一个理想的起点，它...
CSS3绘制哆啦A梦头像动画特效代码
03-20
在本示例中，我们将深入探讨如何利用CSS3的强大功能来绘制哆啦A梦的头像动画效果。这个项目特别关注CSS3的选择器、转换、动画以及如何通过响应鼠标事件来实现动态变化。 首先，CSS3是层叠样式表（Cascading Style ...
纯css3绘制的哆啦a梦机器猫头像效果源码.zip
11-01
【标题】中的“纯css3绘制的哆啦a梦机器猫头像效果源码”表明这是一个使用CSS3技术实现的哆啦A梦机器猫头像的编程项目。CSS3是层叠样式表（Cascading Style Sheets）的第三个版本，它在网页设计中扮演着重要的角色，...
Layout 布局组件快速搭建
赵士杰——成功并非一蹴而就，而是在持之以恒的努力中逐渐实现。
09-13 1412
Layout 布局组件快速搭建： 1. 设置主题样式变量 2. 封装公共布局组件 3. 经典布局 4. 水平布局 5. 响应式布局 6. 搭建 Layout 布局组件 7. 添加 Layout 路由配置 8. 启动项目
HTML、CSS实现树状图
p_s_p的博客
09-09 692
【代码】HTML、CSS实现树状图。
css父容器溢出隐藏 子容器溢出滚动
u010234868的专栏
09-13 348
parent 容器设置了固定的宽度和高度，并且通过 overflow: hidden;隐藏了溢出的 .child 容器内容。如果 .child 容器的内容确实超出了其设定的宽度和高度，则会显示滚动条，允许用户滚动查看所有内容。在父容器上设置 overflow: hidden;可以隐藏溢出的内容。如果你想要在子容器溢出时出现滚动条，可以设置 overflow: auto;
【CSS in Depth 2 精译_032】5.4 Grid 网格布局的显示网格与隐式网格（上）
最新发布
PeacefulWinter的博客
09-17 633
本篇为《CSS in Depth》全新第2版5.4小节的上篇，主要介绍了 Grid 网格布局中的显示网格（explicit grid）与隐式网格（implicit grid）的基本概念，并通过引入一个新的示例页面，详细演示并讲解了基础网格布局的实现过程，为后续隐式网格的用法做铺垫。建议收藏，并跟随本篇上传的同步源代码在本地进行验证。
用html+css+js画一个哆唻A梦的完整代码
05-25
哆啦A梦动画 <link rel="stylesheet" type="text/css" href="style.css"> <div class="head"></div> <div class="body"></div> <div class="left-arm"></div> <div class="right-arm"></div> ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值