哆啦A梦

最新推荐文章于 2024-11-09 19:32:00 发布
原创 最新推荐文章于 2024-11-09 19:32:00 发布 · 398 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#css 

<head>
	<meta charset="utf-8">
	<title>哆啦A梦</title>
	<link rel="stylesheet" type="text/css" href="DLAM-style.css"/>
</head>

<body>
	<div class="box">
		<div id="DLAM">
			<div class="head">
				<div class="face"></div>
				<div class="eyes">
					<div class="left-eyes"></div>
					<div class="right-eyes"></div>
				</div>
				<div class="mouth"></div>
				<div class="mustache">
					<div class="mustache-left"></div>
					<div class="mustache-right"></div>
				</div>
			</div>
			<div class="body">
				<div class="bell"></div>
			</div>
			<div class="hand">
				<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>
		</div>

	</div>

</body>

*{
margin: 0;
padding: 0;
border: 0;
box-sizing:border-box;
}
html,body{
width: 100%;
min-height: 100%;
height: 100%;
}
body{
position: relative;
}
.box{
width: 600px;
height:600px;
background-color: #fff;
box-shadow: 0 0 10px #ccc;
margin: 20px 10px;
position:relative;
z-index: -50;
}
#DLAM{
position:relative;
width: 100%;
height:100%;
}
#DLAM .head{
position:relative;
width: 300px;
height: 270px;
border: 3px solid #000;
border-top-left-radius: 48% 50%;
border-top-right-radius: 48% 50%;
border-bottom-left-radius: 40% 45%;
border-bottom-right-radius: 40% 45%;
position: absolute;
top:20px;
left: 0;
right: 0;
margin: 0 auto;
background-color: #6395EC;

}
#DLAM .face{
width: 240px;
height:220px;
border-top-left-radius: 50% 60%;
border-top-right-radius:50% 60%;
border-bottom-left-radius: 35% 50%;
border-bottom-right-radius: 35% 50%;
position: absolute;
top:43px;
left: 0;
right:0;
margin: 0 auto;
background-color: #fff;

}
#DLAM .eyes{
width:100px;
height: 80px;
position:absolute;
top:20px;
left:0;
right:0;
margin:0 auto;
}
#DLAM .left-eyes, #DLAM .right-eyes{
width: 50%;
height: 100%;
border: 2px solid #000000;
position: relative;
background-color: #fff;
display:block;

}
#DLAM .left-eyes{
border-radius: 50% 40% 50% 40%;
}
#DLAM .left-eyes:before{
content:"";
width: 20px;
height: 30px;
border:2px solid #000;
border-radius:50% 50%;
top:30%;
left:15px;
background-color: black;
position: absolute;

}
#DLAM .left-eyes:after{
content:"";
width: 15px;
height: 20px;
border:1px solid #FFF2E3;
border-radius:50% 50%;
top:40%;
left:20px;
background-color: #fff;
position: absolute;
}

#DLAM .right-eyes{

border-radius: 40% 50% 40% 50%;
left:50px;
top: -80px;
}
#DLAM .right-eyes:before{
content:"";
width: 20px;
height: 30px;
border:2px solid #000;
border-radius:50% 50%;
top:30%;
right:15px;
background-color: black;
position: absolute;
}
#DLAM .right-eyes:after{
content:"";
width: 15px;
height: 20px;
border:1px solid #FFF2E3;
border-radius:50% 50%;
top:40%;
right:20px;
background-color: #fff;
position: absolute;
}
#DLAM .mouth{
width: 100px;
height: 50px;
border: 2px solid #000;
border-top:none;
border-top-left-radius: 0% 0%;
border-top-right-radius: 0% 0%;
border-bottom-left-radius: 50% 100%;
border-bottom-right-radius: 50% 100%;
position: absolute;
top:150px;
left: 0;
right: 0;
margin: 0 auto;
}
#DLAM .mouth:before{
content:"";
width: 30px;
height: 30px;
border-radius:100%;
border:2px solid black;
position: absolute;
top:-50px;
left:0;
right: 0;
margin: 0 auto;
box-shadow: inset 0px -5px 0 10px #FF6B6B;
}
#DLAM .mouth:after{
content:"";
width: 0px;
height:68px;
border-left:2px solid #000;
position: absolute;
top: -18px;
left: 0;
right: 0;
margin: 0 auto;
}

#DLAM .mustache-left{
width: 70px;
height: 1px;
background-color: #000;
transform: rotate(0deg);
position: absolute;
top: 140px;
left: 45px;
box-shadow: 0 1px #555;
-webkit-box-reflect:right 28px;

}
#DLAM .mustache-left:before{
content:"";
width: 70px;
height: 1px;
background-color: #000;
transform: rotate(30deg);
position: absolute;
top: -28px;
left: 4px;
box-shadow: 0 1px #555;
}
#DLAM .mustache-left:after{
content:"";
width: 70px;
height: 1px;
background-color: #000;
transform: rotate(-30deg);
position: absolute;
top: 30px;
left: 4px;
box-shadow: 0 1px #555;
-webkit-box-reflect:right 28px;
}
#DLAM .mustache-right{
width: 70px;
height: 1px;
background-color: #000;
transform: rotate(0deg);
transform: rotate;
position: absolute;
top: 140px;
right: 45px;
box-shadow: 0 1px #555;

}
#DLAM .mustache-right:before{
content:"";
width: 70px;
height: 1px;
background-color: #000;
transform: rotate(-30deg);
position: absolute;
top: -28px;
right: 4px;
box-shadow: 0 1px #555;
}
#DLAM .mustache-right:after{
content:"";
width: 70px;
height: 1px;
background-color: #000;
transform: rotate(30deg);
position: absolute;
top: 30px;
right: 4px;
box-shadow: 0 1px #555;
}
#DLAM .body{
position: relative;
width: 280px;
height: 220px;
border-top-left-radius: 40% 50%;
border-top-right-radius: 40% 50%;
border-bottom-left-radius: 30% 45%;
border-bottom-right-radius: 30% 45%;
position: absolute;
top:300px;
left:0;
right:0;
margin: 0 auto;
background-color: #6395EC;
z-index: -2;
}
#DLAM .body:before{
content: “”;
width:170px;
height: 160px;
border:2px solid #000;
border-radius: 50%/60%;
position: absolute;
top:0;
left: 0;
right: 0;
margin: 0 auto;
background-color: #fff;
z-index: -2;
}

#DLAM .body:after{
content:"";
width:150px;
height:80px;
border: 2px solid #000;
border-radius: 50%/0 0 100% 100%;
position: absolute;
top:70px;
left:0;
right: 0;
margin: 0 auto;
background-color: #fff;

}

#DLAM .bell{
width: 50px;
height: 50px;
background-color: #756742;
border-radius:100%;
border-color: #FEE13E;
border-style: solid;
border-top-width: 26px;
border-bottom-width: 12px;
border-left-width: 19px;
border-right-width: 19px;
box-shadow:0 0 1px 1px #000,inset 0 0 1px 1px #000;
position: absolute;
top: 0;
left: 0;
right: 0;
margin: 0 auto;
z-index: -1;
}
#DLAM .bell:before{
content: “”;
width: 45px;
height: 5px;
background-color: greenyellow;
border:2px solid #000;
position: absolute;
left: -18px;
right: -18px;
top: -13px;
border-radius: 5px;
}
#DLAM .bell:after{
content: “”;
height: 18px;
background-color: #D90222;
border: 2px solid #000;
border-radius: 5px;
position: absolute;
left: -60px;
right: -60px;
top: -40px;
z-index: -1;
}
#DLAM .hand{
width: 300px;
position: absolute;
top: 300px;
left: 0;
right: 0;
margin: 0 auto;
z-index: -3;
}
#DLAM .left-hand,#DLAM .right-hand{
width: 64px;
height: 64px;
border:2px solid #000;
border-radius: 100%;
position: relative;
background-color: #fff;
}
#DLAM .left-hand{
float: left;
top: 90px;
left: -90px;
}
#DLAM .left-hand:before{
content: “”;
width: 50px;
height: 130px;
border:1px solid black;
border-top:none;
border-right: none;
border-bottom: none;
border-top-left-radius: 30% 50%;
border-top-right-radius: 0% 0%;
border-bottom-left-radius: 30% 50%;
border-bottom-right-radius: 0% 0%;
position: absolute;
top: -90px;
left: 65px;
transform:rotate(55deg);
background-color: #059AE2;
z-index: -3;
}
#DLAM .right-hand{
float: right;
top: 90px;
right: -90px;
}
#DLAM .right-hand:before{
content: “”;
width: 50px;
height: 130px;
border:1px solid black;
border-top:none;
border-left: none;
border-bottom: none;
border-top-left-radius: 0% 0%;
border-top-right-radius: 30% 50%;
border-bottom-left-radius: 0% 0%;
border-bottom-right-radius: 30% 50%;
position: absolute;
top: -90px;
right: 65px;
transform:rotate(-55deg);
background-color: #059AE2;
z-index: -3;
}
#DLAM .foot{
height: 50px;
width: 280px;
position: absolute;
left: 0;
right: 0;
top:520px;
margin: 0 auto;
}
#DLAM .left-foot, #DLAM .right-foot{
width: 50%;
height: 100%;
border: 2px solid #000;

}

#DLAM .left-foot{
float: left;
border-top-left-radius: 40% 80%;
border-top-right-radius: 0% 0%;
border-bottom-left-radius: 30% 50%;
border-bottom-right-radius: 10% 10%;
}
#DLAM .right-foot{
float: right;
border-top-left-radius: 0% 0%;
border-top-right-radius: 40% 80%;
border-bottom-left-radius: 10% 10%;
border-bottom-right-radius: 30% 50%;
}

HTML5期末大作业：动漫人物介绍网站设计——哆啦A梦(5页) HTML+CSS+JavaScript 学生动漫网页设计模板下载 哆啦A大学生HTML网页制作作品 简单漫画网页设计成品
七夕情人节表白网页代码100款 HTML5网页设计与制作1120款 Echarts大屏数据150款
11-11 8450
HTML5期末大作业：动漫人物介绍网站设计——哆啦A梦(5页) HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计 计算机毕设网页设计源码 常见网页设计作业题材有 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 明星、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、 游戏、 节日、 戒烟、 电影、 摄影、 文化、 家乡、 鲜花、 礼品、 汽车、 其他 等网页设计题目, A+水平作业, 可满足
哆啦A梦简易设计
weixin_44239035的博客
04-01 961
用html和css来设计一个哆啦A梦，主要运用了css样式改变来实现，代码有点长还可以简化很多内容，加了一点点动画的效果，其实可以让整个人盒子动起来更能实现哆啦A梦的跳动感觉，不过我还没有做。很基础的css内容。 html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> ...
HTML学生个人网站作业设计：电影网站设计——电影资讯博客(5页) HTML+CSS+JavaScript 简单DIV布局个人介绍网页模板代码 DW学生个人网站制作成品下载
weixin_BJ050106的博客
03-07 6133
一、作品介绍 1.作品简介 ：html期末大作业,dw学生网页设计作业, A+水平 ,喜欢的可以下载，文章页支持手机PC响应式布局。 2.作品编辑：作品下载后可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作）。 3.知识应用：技术方面主要应用了大学生网页课程中的: Div+CSS、鼠标滑过特效、Table、导航栏效果、Banner、表单、二级三级页面等，
哆啦A梦和小猪佩奇（Python实现）
热门推荐
weixin_46039719的博客
04-02 1万+
目录 1 哆啦A梦 2 小猪佩奇 3Python代码实现（哆啦A梦） 4 Python代码实现（小猪佩奇） 1 哆啦A梦 “只要把愿望系在竹竿上请求月亮女神，心愿便能达成”。我超喜欢这句话。 哆啦A梦的创造要追溯到1969年的某个截稿日，作者藤子·F·不二雄的家里突然闯进了一只小猫，虽然很快就要截稿了，但作者还是和小猫玩了起来，还替小猫挠虱子，而这一挠就是几个小时。等作者发现时间不够用的时候，已经来不及完成稿子。这时作者像热锅上的蚂蚁走来走去，突然踢到了女儿的不倒翁玩具，于是作者灵光一..
哆啦A梦 动漫主题网页设计 html源码 四页 代码带注释
m0_37916936的博客
04-24 1109
【html+css+javascript】动漫4页 哆啦A梦主题网页 带js轮播图 代码带注释。dw、hbuilder、vscode、sublime等编辑软件都可打开运行修改图片文字代码。主要分为 首页、哆啦A梦、主要角色·、剧情梗概。网页比较简单，适合初学者 ,学生网页。用到的是flex弹性布局。
制作一个简单HTML哆啦A梦主题网页（HTML+CSS）
qq_50221178的博客
06-06 698
有完整代码提供给大家
使用Python的Turtle绘制哆啦A梦实例
09-18
在本篇教程中，我们将学习如何使用Python的Turtle库绘制哆啦A梦的形象。Turtle库是一个简单而直观的图形编程模块，非常适合...同时，你还可以尝试添加更多细节，如哆啦A梦的铃铛或其他特征，进一步提升图形的逼真度。
python画哆啦A梦
12-21
在本例中，我们将探讨如何利用turtle库来绘制哆啦A梦这一经典角色。 首先，我们需要导入turtle库。`import turtle`语句用于引入这个模块，使得我们可以使用它提供的所有函数和方法。turtle库中的主要对象是turtle，...
精选资源
哆啦A梦.html
12-25
哆啦A梦
哆啦a梦(移动测试工具).apk
08-17
哆啦a梦(移动测试工具) 安卓测试功能：代理设置、应用管理、设备信息、内存填充、文件生成、性能监控、添加测试联系人、卸载所有app、ANR获取、时间调整、一键搬家、文件监控、简易文件管理、模拟广播、设置host、...
基于java实现的窗口类小游戏哆啦A梦历险记 .zip
最新发布
11-25
以“哆啦A梦历险记”为题材的游戏，不仅吸引了广大动漫爱好者的关注，也成为了检验程序员编程能力的一个有趣项目。 首先，Java语言作为一种高级的、面向对象的编程语言，它的特点之一是具有良好的跨平台性，使得...
HTML5期末大作业：体育运动足球网站设计——足球(10页) HTML+CSS+JavaScri大学生体育运动网页设计模板代码 校园足球网页作业成品 学校足球网页制作模板 学生简单体育运动网站设计成品
七夕情人节表白网页代码100款 HTML5网页设计与制作1120款 Echarts大屏数据150款
11-18 2158
HTML5期末大作业：体育运动足球网站设计——足球(10页) HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计 计算机毕设网页设计源码 常见网页设计作业题材有 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 明星、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、 游戏、 节日、 戒烟、 电影、 摄影、 文化、 家乡、 鲜花、 礼品、 汽车、 其他 等网页设计题目, A+水平作业, 可满足大
web期末作业设计网页：动漫网站设计——哆啦A梦(10页) HTML+CSS+JavaScript 学生DW网页设计作业成品 动漫网页设计作业 web网页设计与开发 html实训大作业
m0_62153875的博客
08-05 6537
📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。📘网站素材方面：计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。
动漫哆啦A梦网页模板 网页设计优秀案例
a13580529499的博客
11-09 1256
动漫网页设计模板《哆啦A梦》，网页运用了哆啦A梦标志性的经典蓝色，并配以生动可爱的图片，很好契合了动漫的纯真童趣主题。值得一提的是，网页可以选择不同的版本，默认是6页的HTML+CSS简单版本，也可以选择复杂一点的12页版本，非常灵活。可作为哆啦A梦前端网页模板，哆啦A梦网页设计作业等。
XYNUOJ 哆啦A梦的口袋
Dear_Jia的博客
01-01 1202
问题 G: 哆啦A梦的口袋时间限制: 1 Sec  内存限制: 32 MB提交: 11  解决: 8[提交][状态][讨论版]题目描述大家都知道哆啦A梦有一个神奇的口袋，从那个口袋里可以变出任何东西。不过最近哆啦A梦的口袋里资源比较紧张，只能变出某些符合条件的东西。具体条件如下：（1）东西的名字仅由字母（大小写均可）、数字组成。（仅由字母组成、仅由数字组成或由字母数字共同组成均可。）（2）如果名字...
哆啦A梦 canvas
anglinzl71200的博客
12-06 302
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head> &lt...
css——哆啦A梦
weixin_52651213的博客
05-10 1336
课堂小作业，用css画一只哆啦A梦，分为两部分，主页部分index、样式部分css 由于太菜所以书的部分直接用抠图，嘴巴部分简单的实现了一下。 话不多说上原图 代码实现部分如下： 一、index页面： <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <!-- 导入式 --> <lin
html画哆啦a梦源代码,151行html+CSS3绘制出动态的“哆啦A梦”
weixin_29094775的博客
06-07 2296
#main{width:640px;height:550px;background:lightblue;margin:0 auto;position:relative;margin-top:30px;}header{width:330px;height:330px;background:#04a0ea;border-radius:50%;margin-left:150px;border:2px s...
HTMLCSS学习笔记（二十四）——利用border属性制作太极图与哆啦A梦
qq_45268602的博客
08-17 253
旋转太极图 <!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
哆啦A梦PPT剪切画素材系列4下载
- 哆啦A梦作为日本漫画和动画《哆啦A梦》中的主角，是一个广受欢迎的形象。剪切画是指将图片编辑成适合特定场景和用途的图形，使其易于在不同媒体上使用。 - 在本例中，哆啦A梦剪切画系列4包含了多种生动的动作...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值