使用纯碎的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这里是指倾斜的角度,具体小伙伴们自己体会!

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

展开阅读全文

没有更多推荐了,返回首页