css html弄出哆啦a梦,用css画一个哆啦A梦

原图：

效果图：

虽然说没用啥什么高级的技巧，但这让我感受到了CSS的乐趣！

好好学习，天天向上！

body{

background-color: #66B3FF;

height: 300px;

overflow: hidden;

}

#head{

width: 200px;

height: 200px;

position: absolute;

left: 50%;

top:31%;

margin-left: -100px;

margin-top: -100px;

background-color: #0080FF;

border-radius: 999px;

border: 1px solid black;

}

#face{

width: 179px;

height: 150px;

position: absolute;

left: 43.4%;

top:22%;

background-color: white;

border-radius: 999px;

border: 1px solid black;

}

#leftEye{

width: 50px;

height: 60px;

position: absolute;

left:46.2%;

top:18%;

background-color: white;

border-radius: 50%;

border: 1px solid black;

}

#rightEye{

width: 50px;

height: 60px;

position: absolute;

left:50%;

top:18%;

background-color: white;

border-radius: 50%;

border: 1px solid black;

}

#leftEye1{

width: 13px;

height: 20px;

position: absolute;

left:48.5%;

top:22.2%;

background-color: black;

border-radius: 50%;

border: 1px solid black;

}

#rightEye1{

width: 13px;

height: 20px;

position: absolute;

left:50.5%;

top:22.2%;

background-color: black;

border-radius: 50%;

border: 1px solid black;

}

#leftEye2{

width: 5px;

height: 8px;

position: absolute;

left:48.9%;

top:23%;

background-color: white;

border-radius: 50%;

border: 1px solid black;

}

#rightEye2{

width: 5px;

height: 8px;

position: absolute;

left:50.7%;

top:23%;

background-color: white;

border-radius: 50%;

border: 1px solid black;

}

#nose{

width: 25px;

height: 25px;

position: absolute;

left:49%;

top:25.5%;

background-color: red;

border-radius: 50%;

border: 1px solid black;

}

#nose1{

width: 6px;

height: 6px;

position: absolute;

left:49.5%;

top:26.5%;

background-color: white;

border-radius: 50%;

}

#line{

width: 1px;

height: 100px;

position: absolute;

left:49.9%;

top:29.7%;

background-color: white;

border-left: 2px solid #000000;

margin-left: 1px;

}

#line1{

width: 60px;

height: 1px;

position: absolute;

left:43.5%;

top:28%;

background-color: white;

border-bottom: 1px solid #000000;

margin-left: 1px;

transform:rotate(12deg);

}

#line2{

width: 60px;

height: 1px;

position: absolute;

left:43.5%;

top:32%;

background-color: white;

border-bottom: 1px solid #000000;

margin-left: 1px;

}

#line3{

width: 60px;

height: 1px;

position: absolute;

left:43.5%;

top:36%;

background-color: white;

border-bottom: 1px solid #000000;

margin-left: 1px;

transform:rotate(-12deg);

}

#line4{

width: 60px;

height: 1px;

position: absolute;

left:51.6%;

top:28%;

background-color: white;

border-bottom: 1px solid #000000;

margin-left: 1px;

transform:rotate(-12deg);

}

#line5{

width: 60px;

height: 1px;

position: absolute;

left:51.6%;

top:32%;

background-color: white;

border-bottom: 1px solid #000000;

margin-left: 1px;

}

#line6{

width: 60px;

height: 1px;

position: absolute;

left:51.6%;

top:36%;

background-color: white;

border-bottom: 1px solid #000000;

margin-left: 1px;

transform:rotate(12deg);

}

#mouse{

width: 130px;

height: 130px;

position: absolute;

left: 45.1%;

top:30%;

margin-left: -0.5px;

background-color: white;

border-radius: 0 0 65px 65px;

border-bottom: 2px solid black;

height: 65px;

}

#food{

width: 80px;

height: 62px;

position: absolute;

left:46.9%;

top:39.2%;

background-color:#FFAF60;

border-radius: 50%;

border: 1px solid black;

}

#food1{

width: 78px;

height: 57px;

position: absolute;

left:47%;

top:38.9%;

background-color: #FFAF60;

border-radius: 50%;

border: 1px solid black;

}

#food2{

width: 73px;

height: 52px;

position: absolute;

left:47.2%;

top:39.1%;

background-color:#844200;

border-radius: 50%;

}

#leftFist{

width: 50px;

height: 50px;

position: absolute;

left:45%;

top:40%;

margin-left: -15px;

margin-top: -15px;

background-color: white;

border-radius: 999px;

border: 1px solid black;

}

#rightFist{

width: 50px;

height: 50px;

position: absolute;

left:53%;

top:40%;

margin-left: -15px;

margin-top: -15px;

background-color: white;

border-radius: 999px;

border: 1px solid black;

}

#leftHand{

width: 50px;

height: 70px;

position: absolute;

left:43.3%;

top:44%;

margin-left: -15px;

margin-top: -15px;

background-color: #0080FF;

border-radius: 50%;

transform:rotate(34deg);

border: 1px solid black;

}

#rightHand{

width: 50px;

height: 70px;

position: absolute;

left:54.3%;

top:44%;

margin-left: -15px;

margin-top: -15px;

background-color: #0080FF;

border-radius: 50%;

transform:rotate(-34deg);

border: 1px solid black;

}

#tummy{

width: 110px;

height: 110px;

position: absolute;

left: 53.1%;

top:58.5%;

margin-left: -100px;

margin-top: -100px;

background-color: white;

border-radius: 999px;

border: 1px solid black;

}

#bodyy{

width: 135px;

height: 115px;

position: absolute;

left: 44.7%;

top:45%;

background-color: #0080FF;

}

#cover{

width: 400px;

height: 400px;

position: absolute;

left: 35.3%;

top:62.3%;

background-color:#66B3FF;

border-radius: 50%;

}

#leftLeg{

width: 80px;

height: 90px;

position: absolute;

left:42%;

top:53.5%;

margin-left: -15px;

margin-top: -15px;

background-color: white;

border-radius: 50%;

border: 1px solid black;

}

#rightLeg{

width: 80px;

height: 90px;

position: absolute;

left:53.7%;

top:53.5%;

margin-left: -15px;

margin-top: -15px;

background-color: white;

border-radius: 50%;

border: 1px solid black;

}

#pocket{

width: 88px;

height: 82px;

position: absolute;

left: 46.5%;

top:51.6%;

margin-left: -0.5px;

background-color: white;

border-radius: 0 0 41px 41px;

border: 1px solid black;

height: 41px;

}

[css]我要用css画幅画(七) - 哆啦A梦

接着之前的[css]我要用css画幅画(六),今天画的有所不同,画的是哆啦A梦,我们小时候对他的称呼其实是小叮当机器猫. (PS:这次我要做的事情,很多人已经做过,这并不是什么创新,我只是在学习并记录 ...

使用css画一个箭头

css画一个提示框

用css画一个如下图的提示框: 代码如下:

【前端切图】用css画一个卡通形象-小猪佩奇

最近在腾讯云技术社区遇到了一位奇才,用css画出了一个社会人小猪佩奇,不得不服.研究了一下他的文章https://segmentfault.com/a/1190000014909658,感觉甚是有趣, ...

CSS画一个三角形，CSS绘制空心三角形，CSS实现箭头

壹 ❀ 引 这两天因为项目工作较少,闲下来去看了GitHub上关于面试题日更收录的文章,毕竟明年有新的打算.在CSS收录中有一题是 用css创建一个三角形,并简述原理 .当然对于我来说画一个三角形是 ...

div+css画一个小猪佩奇

用DIV+CSS画一个小猪佩奇,挺可爱的,嘻嘻. HTML部分(全是DIV)

随机推荐

python基础——单元测试

python基础——单元测试 如果你听说过“测试驱动开发”(TDD:Test-Driven Development),单元测试就不陌生. 单元测试是用来对一个模块.一个函数或者一个类来进行正确性检验的 ...

uva1587BOX

给定6个矩形的长和宽wi和hi(1≤wi,hi≤1000),判断它们能否构成长方体的6个面. 思路是首先排序,每个矩形都是x

iOS 渐变提示。Labe自动换行

UILabel *noticeLabel = [[UILabel alloc]init]; noticeLabel.text = @"当前账号已失效果,已清除当前账号已失效果,已清除当前账号 ...

【Path Sum】cpp

题目: Given a binary tree and a sum, determine if the tree has a root-to-leaf path such that adding up ...

测试rest接口的两个工具使用详解(restclient+soapUI)

http://www.cnblogs.com/lanxuezaipiao/archive/2013/05/31/3110764.html http://www.oschina.net/news/618 ...

apache 设置禁止访问某些文件或目录

[apache配置禁止访问]1. 禁止访问某些文件/目录增加Files选项来控制,比如要不允许访问 .inc 扩展名的文件,保护php类库:

理解JavaScript原型

Javascript原型总会给人产生一些困惑,无论是经验丰富的专家,还是作者自己也时常表现出对这个概念某些有限的理解,我认为这样的困惑在我们一开始接触原型时就已经产生了,它们常常和new.constr ...

[Abp 源码分析]四、模块配置

0.简要介绍 在 Abp 框架当中通过各种 Configuration 来实现模块的配置,Abp 本身提供的很多基础设施功能的一些在运行时的行为是通过很多不同的 Configuration 来开放给用 ...

安装顺序----------SQL server 2008 r2；VS2008；VS2010；

[1]一般先安装了VS2008 再安装SQL server 2008 r2会报错:安装sql server 2008 报错“检查 Microsoft Visual Studio 2008 的早期版本” ...