使用纯碎的HTML CSS制作多拉A梦（即为CSS画图）

最新推荐文章于 2024-06-06 14:47:15 发布
最新推荐文章于 2024-06-06 14:47:15 发布
阅读量1.4k 收藏 6
点赞数 4
文章标签： HTML  CSS css多拉A梦 css画图（圆形/椭圆/三角） css画圆形
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_35788269/article/details/80308038
版权

使用纯碎的HTML CSS制作多拉A梦（即为CSS画图）

今天呢，博主带领小伙伴们使用纯碎的CSS制作一个多拉A梦，对，你没看错，，陪伴我们童年的蓝胖子！233

要实现多拉A梦的制作，首先我们需要了解一下CSS画图的基本知识！为了引起小伙伴的兴趣！先来看下多拉A梦制作效果图把！


怎么样？是不是超级可爱，2333.我们的蓝胖子，，，，

第一,三角形的实现：

原理：在css盒子模型之中，当一个盒子的两条边在边角处相交的时候，浏览器就会在交点按照某个角度（如果盒子是正方形的，则为顺时针45° 135° 225° 315°）绘制出一条接合线！这个时候，我们把盒子的宽度高度都设置为0，在把border-color某个方向的属性保留，其他方向隐藏，这样就可以得到对应方向的三角形了！

代码：

<!DOCTYPE html >
< html lang= "en" >
< head >
< meta charset= "UTF-8" >
< meta name= "viewport" content= "width=device-width, initial-scale=1.0" >
< meta http-equiv= "X-UA-Compatible" content= "ie=edge" >
< title >Document </ title >
< style type= "text/css" >
#box{
width: 0px;
height: 0px;
border: 20px;
border-style: solid;
border-color: red transparent transparent transparent ;
}
< / style >
</ head >
< body >
< div id= "box" >

</ div >
</ body >
</ html >

第二个：学习圆角的应用，这里博主不再废话了，直接贴代码，主要是border-radius的用法，下面是制作一个QQ对话气泡的代码！2333偷笑

QQ对话气泡代码：

<!DOCTYPE html >
< html lang= "en" >
< head >
< meta charset= "UTF-8" >
< meta name= "viewport" content= "width=device-width, initial-scale=1.0" >
< meta http-equiv= "X-UA-Compatible" content= "ie=edge" >
< title >Document </ title >
< style type= "text/css" >
#wrapper{
display: inline-block;
position: relative;
padding: 20px 30px;
margin-top: 100px;
border: 1px solid red;
border-radius: 10px; /*半径为10像素，添加圆角效果*/
font-size: 14px;
font-weight: bold;
text-align: center;
background-color: aquamarine;
}
#triangle{
position: absolute;
left: 50%;
margin-left: -15px;
width: 0;
height: 0;
border-width: 15px;
border-style: solid;
border-color: transparent transparent red transparent;
margin-top: -50px;

}
#triangle div{
position: absolute;
top: -13px;
left: -14px;
width: 0;
height: 0;
border-width: 14px;
border-style: solid;
border-color: transparent transparent aquamarine transparent;

}

< / style >
</ head >
< body >
< div id= "wrapper" >
< div id= "triangle" >
< div ></ div >
</ div >
欢迎来到qq_35788269的博客
</ div >
</ body >

</html>

我们来贴下qq对话气泡的代码效果：

第三：学习如何画圆形：这里不多废话，直接贴代码！

<!DOCTYPE html >
< html lang= "en" >
< head >
< meta charset= "UTF-8" >
< meta name= "viewport" content= "width=device-width, initial-scale=1.0" >
< meta http-equiv= "X-UA-Compatible" content= "ie=edge" >
< title >Document </ title >
< style >
#top{
width: 200px;
height: 200px;
border: 1px solid black;
border-radius: 100px;
text-align: center;
margin: 0 auto;
background: blue;
}
< / style >
</ head >
< body >
< div id= "top" ></ div >
</ body >
</ html >

这里是多拉A梦中的一部分代码，，画圆形，，头部的第一个圆形，这里设置半径为100px；蓝色，剧中！

第四就是学习椭圆的画法了，这也是最后一个要学习的东西，结束之后，我们就可以开始蓝胖子的制作了HHHH，

小伙伴们是不是很激动！

废话不多说，直接贴代码。事实上呢，椭圆跟圆形是比较像的，我们学过高中数学都知道圆是特殊的椭圆HHH！

椭圆代码如下：

!DOCTYPE html >
< html lang= "en" >
< head >
< meta charset= "UTF-8" >
< meta name= "viewport" content= "width=device-width, initial-scale=1.0" >
< meta http-equiv= "X-UA-Compatible" content= "ie=edge" >
< title >Document </ title >
< style >
#top{
width: 200px;
height: 100px;
border: 1px solid black;
border-radius: 100px/ 50px;
text-align: center;
margin: 0 auto;
background: blue;
}
< / style >
</ head >
< body >
< div id= "top" ></ div >
</ body >
</ html >
这个时候呢，细心的小伙伴可能发现了，跟圆的代码超级像，显然，这里依然沿袭了数学中的概念，椭圆实轴，虚轴相等就是

圆，上面的代码是画一个虚轴50px；实轴100px；的椭圆！

好了，，，emmmmm！这么久过去了，，才到我们今天的主角登场，，接下来我们要进入蓝胖子的制作2333偷笑

大体上呢，代码分为两部分，显然HTML代码与样式表CSS！

我们先来贴下HTML代码把，，主要使用DIV+SPAN布局，，直接贴不废话！

<!DOCTYPE html >
< html lang= "en" >
< head >
< meta charset= "UTF-8" >
< meta name= "viewport" content= "width=device-width, initial-scale=1.0" >
< meta http-equiv= "X-UA-Compatible" content= "ie=edge" >
< title >Document </ title >
< link rel= "stylesheet" type= "text/css" href= "多拉A梦.css" >
</ head >
< body >
< div id= wrapper >
< div id= "top1" ></ div >
< div id= "top" >
< div id= "top2" ></ div >
< div id= "face" >
< span id= "eyeleft" >
< span id= "left-eyeball" ></ span >
</ span >
< div id= "eyeright" >
< span id= "right-eyeball" >
< span class= "right-eyeball-0" ></ span >
</ span >
</ div >
< div id= "nose" >
< div id= "nose-white" ></ div >
</ div >
< div id= "direct-line" ></ div >
< div id= "mouse" ></ div >
< div id= "mustache1" ></ div >
< div id= "mustache2" ></ div >
< div id= "mustache3" ></ div >
< div id= "mustache4" ></ div >
< div id= "mustache5" ></ div >
< div id= "mustache6" ></ div >
</ div >

</ div >
< div id= "middle" >
< div id= "middle1" >
</ div >
</ div >
< div id= "footer" >
< div id= "banyuan" >
< div id= "xiaobanyuan" ></ div >
</ div >
< div id= "xiaokong" ></ div >
< div id= "leftfoot" ></ div >
< div id= "rightfoot" ></ div >
</ div >
< div id= "leftarm" ></ div >
< div id= "leftarm1" ></ div >
< div id= "rightarm" ></ div >
< div id= "rightarm1" ></ div >
< div id= "buzz" >
< span id= "middle3" ></ span >

</ div >
</ div >
</ body >
</ html >
OK!这就是多拉A梦的HTML代码，，，，超级少对吧，但是他的css可不少呢，，博主先说下，，这里某些命名可能有问题，，但是不影响使用，

这个多拉A梦代码。是博主昨天六七个小时的努力成果，，，实在太累了，就没有去修正！小伙伴们可自行优化！

接下来就是CSS部分的代码咯2333!

废话少说，一个字“干”！

#wrapper{
width: 300px;
height: 400px;
background: rgb( 15, 187, 15);
text-align: center;
margin: 0 auto;
}
#top1
{
width: 300px;
height: 20px;
background: rgb( 15, 187, 15);
text-align: center;
margin: 0 auto;
}

#top{
width: 200px;
height: 200px;
border: 1px solid black;
border-radius: 100px;
text-align: center;
margin: 0 auto;
background: blue;
}
#top2{ text-align: center;
margin: 0 auto;
width: 200px;
height: 40px;

}
#face{
width: 160px;
height: 160px;
border: 1px solid black;
border-radius: 80px;
background-color: white;
margin-left: 20px;
}
#eyeleft{
width: 40px;
height: 50px;
border: 1px solid black;
border-radius: 20px/ 25px;
background-color: white;
display: inline-block;
margin-left: -40px;
margin-top: -20px;
}
#left-eyeball{
display: inline-block;
width: 16px;
height: 8px;
border: 1px solid black;
border-radius: 16px 16px 0px 0px;
background-color: white;
border-bottom: none;
margin-left: 10px;
margin-top: 20px;
}
#eyeright{
width: 40px;
height: 50px;
border: 1px solid black;
border-radius: 20px/ 25px;
background-color: white;
margin-left: 85px;
margin-top: -52px;
}
#right-eyeball{
display: inline-block;
width: 10px;
height: 20px;
border: 1px solid black;
border-radius: 5px/ 10px;
background-color: black;
margin-top: 15px;
margin-left: -15px;
}
.right-eyeball-0{
display: inline-block;
width: 6px;
height: 10px;
border: 1px solid black;
border-radius: 3px/ 5px;
background-color: white;
margin-top: 5px;
margin-left: -2px;
}
#nose{
width: 30px;
height: 30px;
border: 1px solid black;
border-radius: 15px;
background-color: black;
margin-left: 1px;
margin-top: -20px;
display: inline-block;
}
#nose-white{
display: inline-block;
width: 8px;
height: 8px;
border: 1px solid black;
border-radius: 4px;
background-color: white;
margin-top: 15px;
margin-left: -10px;
}
#direct-line{
border-color: black;
border: solid;
border-width: 1px;
height: 60px;
width: 0px;
margin-left: 80px;
}
#mouse{
width: 140px;
height: 20px;
border: 2px solid black;
border-radius: 0px 0px 140px 140px;
background-color: white;
border-top: none;
margin-top: -20px;
margin-left: 10px;
}
#mustache1{
width: 75px;
border: 1px solid black;
position: absolute;
top: 140px;
margin-left: 1000;
}
#mustache2{
width: 75px;
border: 1px solid black;
margin-top: -51px;
margin-left: 85px;
}
#mustache3{
height: 0px;
border: 1px solid black;
width: 75px;
transform: rotate( 170deg);
margin-top: 10px;

}
#mustache4{
height: 0px;
border: 1px solid black;
width: 75px;
transform: rotate( -170deg);
margin-top: -25px;
}
#mustache5{
height: 0px;
border: 1px solid black;
width: 75px;
transform: rotate( 10deg);
margin-top: 21px;
margin-left: 85px;
}
#mustache6{
height: 0px;
border: 1px solid black;
width: 75px;
transform: rotate( -10deg);
margin-top: -25px;
margin-left: 85px;
}
#middle{
width: 300px;
height: 100px;
}
#middle1{
width: 120px;
border: 1px solid black;
height: 10px;
background-color: blue;
margin-left: 90px;
margin-top: -20px;
}
#buzz{
width: 15px;
height: 20px;
border: 1px solid black;
border-radius: 7.5px/ 10px;
background-color: yellow;
margin-left: 145px;
margin-top: -50px;
}
#middle3{
width: 12px;
height: 1px;
border: 1px solid black;
margin-top: 10px;
display: inline-block;
}
#footer{
width: 120px;
height: 70px;
background-color: blue;
margin-left: 90px;
margin-top: -88px;
border: 1px solid black;
}
#banyuan{
width: 100px;
height: 50px;
border: 1px solid black;
border-radius: 0px 0px 100px 100px;
background-color: white;
margin-left: 10px;
}
#xiaobanyuan{
width: 60px;
height: 30px;
border: 1px solid black;
border-radius: 0px 0px 60px 60px;
background-color: white;
margin-left: 20px;
margin-top: 10px;
}
#xiaokong{
width: 16px;
height: 8px;
border: 1px solid black;
border-radius: 16px 16px 0px 0px;
background-color: white;
margin-left: 50px;
margin-top: 9px;
}
#leftfoot{
width: 65px;
height: 10px;
border-radius: 10px;
background: white;
margin-left: -10px;
border: 1px solid black;
margin-top: -2px;
}
#rightfoot{
width: 65px;
height: 10px;
border-radius: 10px;
background: white;
margin-left: 65px;
margin-top: -12px;
border: 1px solid black;
}
#leftarm{
width: 20px;
height: 30px;
background: blue;
transform: rotate( 10deg);
margin-top: -75px;
border: 1px solid black;
margin-left: 75px;

}
#leftarm1{
width: 20px;
height: 20px;
background: white;
transform: rotate( 10deg);

margin-top: -10px;
border: 1px solid black;
border-radius: 10px;
margin-left: 72px;

}
#rightarm{
width: 20px;
height: 30px;
background: blue;
transform: rotate( 170deg);
margin-top: -42px;
border: 1px solid black;
margin-left: 205px;

}
#rightarm1{
width: 20px;
height: 20px;
background: white;
transform: rotate( 170deg);

margin-top: -10px;
border: 1px solid black;
border-radius: 10px;
margin-left: 208px;


}

ok！以上就是CSS多拉A梦的所有代码！

Finally:我们来总结下把：重点（1）;DIV+SPAN+CSS布局！

重点（2）：胡子怎么画，主要难点斜线怎么处理！当然在HTML5中可以很容易画出来斜线！

我们这里采用了给直线赋予一定的角度的方法来实现斜线胡子的，，代码如下：

#mustache3{
height: 0px;
border: 1px solid black;
width: 75px;
transform: rotate( 170deg);
margin-top: 10px;

}

主要是transformation：rotate（170deg）；的使用，，170deg这里是指倾斜的角度，具体小伙伴们自己体会！

好了，，，终于结束了，，，到这里博主也很累！小伙伴们喜欢博主的话就粉我吧，，动动小手，，评论+点赞，，欢迎继续关注博主哦！

左手写爱等等
关注
  • 4
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
HTML用画布画哆啦A梦,前端小项目：使用canvas绘画哆啦A梦
weixin_30294759的博客
07-01 1672
最近在学canvas元素,标签只是图形容器，必须使用js来绘制图形。为了增强对canvas元素的理解,于是用canvas画了一个哆啦A梦来要实现的效果图要想绘画出这个哆啦a梦首先要掌握以下一些函数：开始绘画！！首先我们需要创建一个400*600的画布，代码如下:复制代码接着定义一个div，用来显示坐标复制代码接着我写了一个显示坐标的函数，可以用来看大概画到哪个点：function zuobiao(...
css+html弄出哆啦a梦,祝儿童节快乐（DIV+CSS绘制哆啦A梦）
weixin_31179927的博客
06-24 709
之前看到别人用DIV+CSS绘制大白，就顺手绘制了一个哆啦A梦，刚好昨天蓝胖子3D版上映，借此祝大家儿童节快乐。效果图：请在CHROME & FIREFOX查看HTML[html][/html]CSS[css]body {background: #357FE0;}.doraemon {width: 504px;height: 600px;position: relative;margin:...
用HTML绘制哆啦A梦
qq_44109821的博客
12-24 4459
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>绘制叮当猫</title> </head> <body> <div> <canvas id="mycanvas" width="450" he...
制作一个简单HTML哆啦A梦主题网页（HTML+CSS）
最新发布
qq_50221178的博客
06-06 310
有完整代码提供给大家
哆啦a梦css html,用css画一个哆啦A梦
weixin_29173299的博客
07-01 387
原图：效果图：虽然说没用啥什么高级的技巧，但这让我感受到了css的乐趣！好好学习，天天向上！body{background-color: #66b3ff;height: 300px;overflow: hidden;}#head{width: 200px;height: 200px;position: absolute;left: 50%;top:31%;margin-left: -100px;m...
【基础教程】超可爱CSS3叮当猫动画（含源码）
weixin_52578018的博客
12-02 507
一、项目教程 运行效果 教程 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>超可爱CSS3叮当猫动画</title> <style> body{ margin: 0; background: lightblue; } /*哆啦A梦*/ .doa{ position: relative; to
css3-doraemon.rar_html5_html5 css3_html5画哆啦a梦
09-20
比如，使用线性渐变（linear-gradient）可以制作出哆啦A梦的身体颜色过渡，而图案则可以用来创建复杂的背景或者装饰元素。图片精灵则是一种优化网页加载速度的技术，将多个小图合并成一张大图，通过CSS的背景定位...
纯js+html和纯css+html制作手风琴效果
10-22
主要介绍了纯js+html制作手风琴和纯css+html制作手风琴两种效果，具有一定的参考价值，感兴趣的朋友可以参考一下
纯css3绘图哆啦a梦机器猫头像特效
11-24
在本案例中，我们将探讨如何使用纯CSS3绘制哆啦A梦机器猫的头像特效。 首先，让我们理解CSS3绘图的基本概念。CSS3引入了若干新的绘图工具，如边框半径、渐变、阴影、多列布局以及变换、过渡和动画等。这些特性为...
纯CSS3绘制哆啦A梦头像动画代码
09-08
在本项目中，我们将探讨如何使用纯CSS3技术来创建一个动态的哆啦A梦头像。CSS3是层叠样式表（Cascading Style Sheets）的第三个版本，它引入了许多新的特性和功能，使网页设计更为丰富和交互性更强。在"纯CSS3绘制哆...
使用html+css 制作的特效
05-28
使用html+css 制作的特效
HTML5 canvas哆啦A梦机器猫图形代码.zip
05-27
HTML5 canvas哆啦A梦机器猫图形代码是利用HTML5 canvas技术绘制的机器猫。
CSS3绘制哆啦A梦头像动画代码.zip
07-11
CSS3绘制哆啦A梦头像动画代码，鼠标移动到头像区域表情有变化。
H5-svg-画哆啦A梦
12-22
<svg width=346 height=399> <!-- 头部 --> <path id='path1' d='m 101 236 A 116 116 0 1 1 245 236'></path> <path id='path2' d='m 118 235 A 93 70 0 1 1 233 236'></path> <!-- <path id='path3' d='m 231 118 A 93 70 0 0 1 233 236'></path> --> <ellipse cx="146" cy="102" rx="29" ry="35"></ellipse> <ellipse cx="204" cy="102" rx="29" ry="35"></ellipse> <line class="eye" x1="154" y1="110" x2="154" y2="116"></line>。。。。。
H5 基础机器猫
06-28
基础游戏开发H5机器猫<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>机器猫</title><styletype="text/css">*{margin:0;padding:0;}.whole{width:800px;margin:20pxauto;/*border:2pxsol
html打造动画【系列4】- 哆啦a梦，【一步教学，一步到位
2301_82242296的博客
03-28 1865
你要问前端开发难不难，我就得说计算机领域里常说的一句话，这句话就是『难的不会，会的不难』，对于不熟悉某领域技术的人来说，因为不了解所以产生神秘感，神秘感就会让人感觉很难，也就是『难的不会』；当学会这项技术之后，知道什么什么技术能做到什么做不到，只是做起来花多少时间的问题而已，没啥难的，所以就是『会的不难』。CodeChina开源项目：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】我特地针对初学者整理一套前端学习资料。
html打造动画【系列4】- 哆啦a梦，从外包公司到今日头条offer
2301_79098082的博客
04-03 637
其实前端开发的知识点就那么多，面试问来问去还是那么点东西。所以面试没有其他的诀窍，只看你对这些知识点准备的充分程度。so，出去面试时先看看自己复习到了哪个阶段就好。这里再分享一个复习的路线：（以下体系的复习资料是我从各路大佬收集整理好的）《前端开发四大模块核心知识笔记》最后，说个题外话，我在一线互联网企业工作十余年里，指导过不少同行后辈。帮助很多人得到了学习和成长。CodeChina开源项目：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
HTML5利用canvas画布绘制哆啦A梦
明哥
03-16 909
效果图： 源码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>蓝胖子</title> <style> canvas { display:block; margin:0 auto; } </style
基于单个 div 的 CSS 画图
05-28
基于单个 div 的 CSS 画图是一种使用 CSS 技术绘制图形的方法，它可以将一个 div 元素作为画布，在其中使用各种 CSS 属性和值来构建出所需的图形。 例如，可以使用 CSS 的 border 属性来绘制一个三角形： ```css .triangle { width: 0; height: 0; border-top: 50px solid red; border-right: 50px solid transparent; border-left: 50px solid transparent; } ``` 这个代码块将创建一个宽度和高度均为 0 的 div 元素，并使用 border 属性来绘制一个红色的三角形。其中，border-top 属性设置了三角形的高度和颜色，border-right 和 border-left 属性则设置了三角形的两侧边长和透明度。 除了使用 border 属性，还可以使用其他 CSS 属性来绘制各种形状，例如 box-shadow、transform、background 等等。需要注意的是，这种方法虽然灵活，但也有一定的局限性，无法绘制复杂的图形。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值