使用纯碎的HTML CSS制作多拉A梦（即为CSS画图）
使用纯碎的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这里是指倾斜的角度，具体小伙伴们自己体会！