哆啦A梦

最新推荐文章于 2024-06-21 16:29:17 发布
最新推荐文章于 2024-06-21 16:29:17 发布
阅读量4.7k 收藏
点赞数
文章标签： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_52884799/article/details/110704859
版权

制作简易哆啦A梦

![<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			body{
				position: relative;
				background: #07BEEA;
				/*background: url(img/timg.gif);*/
				
			}
			.head{
				width: 400px;
				height: 400px;
				background-color: #039be6;
				border-radius: 50%;
				margin: 100px auto;
				position: absolute;
				top: -90px;
				left: 566px;
				border: 1px solid #000;
				z-index: 2;
			}
			.fice{
				width: 350px;
				height: 310px;
				background: #fff;
				border-radius: 50%;
				position: absolute;
				bottom: 10px;
				left: 26px;
				border: 1px solid #000;
			}
			.eye1{
				width: 80px;
				height: 95px;
				border-radius: 50%;
				border: 1px solid #000;
				float: left;
				top: -30px;
				left: 94px;
				position: absolute;
				background: #fff;
				
			}
			.eye2{
				width: 80px;
				height: 95px;
				border-radius: 50%;
				border: 1px solid #000;
				float: left;
				top: -30px;
				left: 178px;
				position: absolute;
				background: #FFF;
				
			}
			.zuoyan{
				width: 28px;
				height: 40px;
				border-radius: 50%;
				position: absolute;
				background: #241615;
				top: 42px;
				left: 46px;
			}
			.youyan{
				width: 28px;
				height: 40px;
				border-radius: 50%;
				position: absolute;
				background: #241615;
				top: 42px;
				left: 6px;
			}
			.p1{
				width: 8px;
				height: 12px;
				border-radius: 50%;
				background: #fff;
				position: absolute;
				top: 16px;
				left: 14px;
			}
			.p2{
				width: 8px;
				height: 12px;
				border-radius: 50%;
				background: #fff;
				position: absolute;
				top: 16px;
				left: 6px;
			}
			.bizi{
				width: 38px;
				height: 38px;
				background: #e30011;
				border: 1px solid black;
				border-radius: 50%;
				position: absolute;
				top: 56px;
				left: 156px;
			}
			.bz{
				width: 10px;
				height: 10px;
				background: #fff;
				border-radius: 50%;
				position: absolute;
				top: 10px;
				left: 10px;
			}
			.zui{
				width: 250px;
				height: 200px;
				border-radius: 80%;
				border-bottom: 2px solid #000;
				position: absolute;
				top: 50px;
				left: 54px;
			}
			.p3{
				width: 1px;
				height: 155px;
				background: #000;
				border-bottom: 1px solid #000;
				position: absolute;
				top: 95px;
				left: 176px;
			}
			.huzi1{
				width: 120px;
				height: 1px;
				border-bottom:1px solid #000;
				transform: rotate(20deg);
				position: absolute;
				border-radius: 50%;
				top: 110px;
				left: 36px;
			}
			.huzi2{
				width: 120px;
				border-bottom:1px solid #000;
				transform: rotate(0deg);
				position: absolute;
				top: 150px;
				left: 36px;
				height: 1px;
				border-radius: 50%;
			}
			.huzi3{
				width: 120px;
				border-bottom:1px solid #000;
				transform: rotate(-20deg);
				position: absolute;
				top: 190px;
				left: 36px;
				border-radius: 50%;
				height: 1px;
			}
			.huzi4{
				width: 120px;
				border-bottom:1px solid #000;
				transform: rotate(-20deg);
				position: absolute;
				top: 110px;
				right: 36px;
				border-radius: 50%;
				height: 1px;
			}
			.huzi5{
				width: 120px;
				border-bottom:1px solid #000;
				transform: rotate(0deg);
				position: absolute;
				top: 150px;
				right: 36px;
				border-radius: 50%;
				height: 1px;
			}
			.huzi6{
				width: 120px;
				border-bottom:1px solid #000;
				transform: rotate(20deg);
				position: absolute;
				top: 190px;
				right: 36px;
				border-radius: 50%;
				height: 1px;
			}
			.tong{
				width: 160px;
				height: 130px;
				border-radius: 50%;
				border: 2px solid #000;
				background: #000;
				position: absolute;
				top: 300px;
				left: 124px;
				background: #f1e2b7;
			}
			.tong1{
				width: 156px;
				height: 120px;
				border-radius: 50%;
				border: 2px solid #000;
				background: #000;
				position: absolute;
				top: -1px;
				left: 0px;
				background: #f1e2b7;
			}
			.tong2{
				width: 154px;
				height: 114px;
				border-radius: 50%;
				border: 1px solid #000;
				background: #000;
				position: absolute;
				top: -1px;
				left: 0px;
				background: #a06c5e;
			}
			.zuoshou{
				width: 80px;
				height: 80px;
				border-radius: 50%;
				background: #fff;
				position: absolute;
				top: 360px;
				left: 70px;
				border: 2px solid #000;
			}
			.youshou{
				width: 80px;
				height: 80px;
				border-radius: 50%;
				background: #fff;
				position: absolute;
				top: 360px;
				right: 70px;
				border: 2px solid #000;
			}
			.shenti{
				width: 230px;
				height: 200px;
				border-radius: 50%;
				position: absolute;
				top: 380px;
				left: 650px;
				background: #fff;
				border:1px solid #000;
			}
			.dai{
				width: 120px;
				height: 80px;
				position: absolute;
				top: 90px;
				left: 54px;
				background: #fff;
				border-radius: 0 0 50% 50%;
				border:1px solid black;
			}
			.zgebo{
				width: 120px;
				height: 80px;
				position: absolute;
				top: 30px;
				left: -90px;
				background: #039be6;
				border: 1px solid #000;
				border-radius: 90% 80% 80% 90%;
				transform: rotate(-45deg);
			}
			.ygebo{
				width: 120px;
				height: 80px;
				position: absolute;
				top: 30px;
				right: -90px;
				background: #039be6;
				border: 1px solid #000;
				border-radius: 90% 80% 80% 90%;
				transform: rotate(-135deg);
			}
			.du{
				width: 230px;
				height: 214px;
				border: 1px solid #000;
				background: #039be6;
				position: absolute;
				top: 0;
				left: -3;
				z-index: -1;
			}
			.di{
				width: 232px;
				height: 10px;
				top: 212px;
				border-top: 1px solid #000;
				position: absolute;
				border-radius: 50%;
				background: #07BEEA;
			}
			.zjiao{
				width: 120px;
				height: 150px;
				border-radius: 50%;
				position: absolute;
				top: 102px;
				left: -54px;
				background: #fff;
				border: 1px solid #000000;
				transform: rotate(-24deg);
			}
			.yjiao{
				width: 120px;
				height: 150px;
				border-radius: 50%;
				position: absolute;
				top: 102px;
				right: -54px;
				background: #fff;
				border: 1px solid #000000;
				transform: rotate(24deg);
			}
			.qipao{
				width: 300px;
				height: 200px;
				border-radius: 50%;
				background: url(img/timg.gif) ;
				background-size: 300px 200px ;
				position: absolute;
				top: -50px;
				left: 175px;
				border: 1px solid #000;
				z-index: 2;
			}
			.qipao2{
				width: 120px;
				height: 50px;
				border-radius: 50%;
				/*background: url(img/timg.gif) ;*/
				background-color: #fff;
				background-size: 150px 50px ;
				position: absolute;
				top: 140px;
				left: 370px;
				border: 1px solid #000;
				z-index: 1;
			}
			.qipao3{
				width: 100px;
				height: 50px;
				border-radius: 50%;
				/*background: url(img/timg.gif) ;*/
				background-color: #fff;
				background-size: 100px 100px ;
				position: absolute;
				top: 180px;
				left: 460px;
				border: 1px solid #000;
			}
			.box11{
				width: 110px;
				height: 80px;
				margin: 50px auto;
				position: relative;
				animation: move .6s infinite;
				top: 96px;
				left: 300px;
			}
			.div1{
				width: 50px;
				height: 80px;
				background: red;
				border-radius: 50px 50px 0 0;
				transform: rotate(45deg);
				position: absolute;
				left: 21px;
				top: 0;
			}
			.div2{
				transform: rotate(-45deg);
				position: absolute;
				left: 0;
				top: 0;
			}
			@keyframes move{
				from{
					transform: scale(1);
				}
				to{
					transform: scale(1.2);
				}
			}
		</style>
	</head>
	<body>
		<div class="box">
			<div class="head">
			<div class="fice">
				<div class="eye1">
					<div class="zuoyan">
						<p class="p1"></p>
					</div>
				</div>
				<div class="eye2">
					<div class="youyan">
						<p class="p2">
							
						</p>
					</div>
				</div>
				<div class="bizi">
					<p class="bz"></p>
				</div>
				<div class="zui"></div>
				<p class="p3"></p>
				<div class="huzi1"></div>
				<div class="huzi2"></div>
				<div class="huzi3"></div>
				<div class="huzi4"></div>
				<div class="huzi5"></div>
				<div class="huzi6"></div>
			</div>
			<div class="tong">
				<div class="tong1">
					<div class="tong2"></div>
				</div>
			</div>
			<div class="zuoshou"></div>
			<div class="youshou"></div>
		</div>
		<div class="shenti">
			<div class="koudai">
				<div class="dai"></div>
			</div>
			<div class="zgebo"></div>
			<div class="ygebo"></div>
			<div class="du"></div>
			<div class="di"></div>
			<div class="zjiao"></div>
			<div class="yjiao"></div>
			
			</div>
			</div>
			
		</div>
		<div class="box11">
			<div class="div1"></div>
			<div class="div1 div2"></div>
		</div>
		<div class="box11">
			<div class="div1"></div>
			<div class="div1 div2"></div>
		</div>
		<div class="box11">
			<div class="div1"></div>
			<div class="div1 div2"></div>
		</div>
		<div class="qipao"></div>
		<div class="qipao2"></div>
		<div class="qipao3"></div>
		
	</body>
</html>![哆啦A梦](https://img-blog.csdnimg.cn/20201205182311986.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzUyODg0Nzk5,size_16,color_FFFFFF,t_70#pic_right)
Dark Sky！
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
HTML哆啦A梦
兔子王
05-14 2万+
谁不想拥有一只可爱的叮当猫呢？本期小编给大家带来了一个萌萌的哆啦A梦。
用Python海龟画图画哆啦A梦
热门推荐
r10Pink_orange的博客
07-31 1万+
用Python海龟画图画哆啦A梦
哆啦A梦任意门GIF动图
04-11
哆啦A梦任意门GIF动图
python教你生成动态二维码
数据分析与统计学之美
03-17 4514
目录 1、绘制X轴、Y轴平行线 2、绘制折线图 3、绘制柱形图 4、绘制帕累托图(在柱形图基础之上绘制双Y轴图) 如果觉得好，就扫描下方的二维码关注我吧！！！ 1、myqr相关参数的使用说明 2、python代码生成静态二维码 # 生成的二维码最终在你电脑的存储位置 # 当你使用了动态图作为背景，这里可以写成".gif"，保存出来的就是gif动态二维码！ save_name = 'G:\\8泰...
多啦a梦的python代码_分享一篇文本文档画哆啦A梦代码！
weixin_33609486的博客
01-30 9952
#encoding=utf-8#Drawcat 画多啦A梦from turtle import *# 无轨迹跳跃def my_goto(x, y):penup()goto(x, y)pendown()# 眼睛def eyes():tracer(False)a = 2.5for i in range(120):if 0 <= i < 30 or 60 <= i < 90:a ...
Python画哆啦A梦
weixin_52954183的博客
10-19 6872
我想一直在你身边直到你不需要我为止——《哆啦a梦》
java画哆啦A梦_java如何绘制哆啦A梦 java绘制哆啦A梦代码示例
weixin_30025115的博客
02-13 3116
java如何绘制哆啦A梦？本篇文章小编给大家分享一下java绘制哆啦A梦代码示例，绘制的哆啦A梦超可爱，小编觉得挺不错的，现在分享给大家供大家参考，有需要的小伙伴们可以来看看。以下是画出哆啦a梦的代码package com;import javax.swing.*;import java.awt.*;public class dlam extends JFrame{public dlam() {t...
HTML用画布画哆啦A梦,前端小项目：使用canvas绘画哆啦A梦
weixin_30294759的博客
07-01 1662
最近在学canvas元素,标签只是图形容器，必须使用js来绘制图形。为了增强对canvas元素的理解,于是用canvas画了一个哆啦A梦来要实现的效果图要想绘画出这个哆啦a梦首先要掌握以下一些函数：开始绘画！！首先我们需要创建一个400*600的画布，代码如下:复制代码接着定义一个div，用来显示坐标复制代码接着我写了一个显示坐标的函数，可以用来看大概画到哪个点：function zuobiao(...
用java画哆啦a梦,来画哆啦A梦吧！
weixin_39958248的博客
03-27 691
import turtle创建哆啦A梦doraemon = turtle.Turtle()doraemon.speed(10)def draw_eye_white_circle(x):doraemon.goto(x, 80)doraemon.pendown()doraemon.color(‘black’)doraemon.begin_fill()doraemon.circle(15)doraemo...
python turtle画多啦a梦_python 海龟绘图画哆啦A梦
weixin_39701834的博客
02-03 1149
import turtle as t#定位def my_goto(x,y):t.up()t.goto(x,y)t.down()#眼睛def eyes():t.tracer(False)a = 2.5for i in range(120):if 0a -= 0.05t.lt(3)t.fd(a)else:a += 0.05t.lt(3)t.fd(a)t.tracer(True)#胡须def beard...
使用Python的Turtle绘制哆啦A梦实例
09-18
今天小编就为大家分享一篇使用Python的Turtle绘制哆啦A梦实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
java绘制哆啦A梦 超可爱
08-19
Java 绘制哆啦A梦超可爱 Java 是一种面向对象的编程语言，广泛应用于 Android 应用程序开发、Web 开发、桌面应用程序开发等领域。javax.swing 和 java.awt 是 Java 的两个主要图形用户界面（GUI）组件包，经常用于...
python画哆啦A梦
12-21
用turtle库画哆啦A梦 今天就交大家如何用turtle库画哆啦A梦,当然你得有turtle库。 完整代码如下: import turtle def flyTo(x, y): turtle.penup() turtle.goto(x, y) turtle.pendown() def drawEye(): turtle....
哆啦A梦.html
12-25
哆啦A梦
python画哆啦A梦.py
03-29
使用python画哆啦A梦，（以下凑字数） 今天就交大家如何用turtle库画哆啦A梦,当然你得有turtle库。由于代码太长，就以文件的形式展示。
c语言绘画哆啦a梦源码,简单壁纸制作-哆啦A梦
weixin_35009700的博客
05-21 1505
可爱的壁纸总是会受到大家的喜欢，那么如何制作一个简单的壁纸呢？跟着源码时代UI老师一起动起来吧！最终效果预览：使用软件：Adobe PhotoShop CC2017方法步骤第一步：打开Adobe PhotoShop CC2017软件并新建画布，设置文件尺寸。以iPhone7 Plus为例，最佳尺寸是：1242/2208，单位：像素(iPhone7 Plus的逻辑分辨率是1242/2208，故为最佳...
HTML初体验
linux423的博客
06-14 495
可参考jd.com官网，ctrl+u查看当前页面源代码找到你的项目，在项目中创建html类型的网页文件标准的HTML正确书写格式效果如下。
electron模板【lectron-react-boilerplate】多窗口配置【HtmlWebpackPlugin】多页面配置
weixin_42429220的博客
06-15 620
如果您正在使用进行快速的Electron应用程序开发，您可能会遇到想要在桌面应用程序中拥有多个原生窗口的情况。MacOS窗口图像由提供，来源。
html做一个分组散点图图的软件
最新发布
weixin_47634487的博客
06-21 439
在HTML中创建一个分组散点图，可以结合JavaScript库如D3.js或Plotly.js来实现。这些库提供了强大的数据可视化功能，易于集成和使用。下面是一个使用Plotly.js创建分组散点图的示例： 要添加文件上传功能，可以让用户上传包含数据的文件（例如CSV文件），然后使用JavaScript读取文件并生成散点图。下面是一个示例，展示了如何结合文件上传和用户输入生成分组散点图： 说明： HTML表单：用于用户手动输入每个组的X和Y值。 文件上传：提供了一个文件输入框和按钮，用于上传CSV文件。
html5 多啦a梦,HTML5利用canvas绘制哆啦A梦头部（代码实例）
06-09
哆啦A梦头部绘制 <canvas id="myCanvas" width="400" height="400"></canvas> var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d"); // 绘制头部 ctx.beginPath(); ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值