用css画一个哆啦A梦
原图：
效果图：
虽然说没用啥什么高级的技巧，但这让我感受到了CSS的乐趣！
好好学习，天天向上！
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/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; }
</style>
</head>
<body>
<div id="head"></div>
<div id="face"></div>
<div id="leftEye"></div>
<div id="rightEye"></div>
<div id="leftEye1"></div>
<div id="rightEye1"></div>
<div id="leftEye2"></div>
<div id="rightEye2"></div>
<div id="nose"></div>
<div id="nose1"></div>
<div id="bodyy"></div>
<div id="tummy"></div>
<div id="mouse"></div>
<div id="line"></div>
<div id="line1"></div>
<div id="line2"></div>
<div id="line3"></div>
<div id="line4"></div>
<div id="line5"></div>
<div id="line6"></div>
<div id="food"></div>
<div id="food1"></div>
<div id="food2"></div> <div id="leftHand"></div>
<div id="rightHand"></div> <div id="cover"></div>
<div id="leftFist"></div>
<div id="rightFist"></div>
<div id="leftLeg"></div>
<div id="rightLeg"></div>
<div id="pocket"></div>
</body>
</html>
用css画一个哆啦A梦的更多相关文章
- [css]我要用css画幅画(七) - 哆啦A梦
接着之前的[css]我要用css画幅画(六),今天画的有所不同,画的是哆啦A梦,我们小时候对他的称呼其实是小叮当机器猫. (PS:这次我要做的事情,很多人已经做过,这并不是什么创新,我只是在学习并记录 ...
- 使用css画一个箭头
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name ...
- css画一个提示框
用css画一个如下图的提示框: 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta c ...
- 【前端切图】用css画一个卡通形象-小猪佩奇
最近在腾讯云技术社区遇到了一位奇才,用css画出了一个社会人小猪佩奇,不得不服.研究了一下他的文章https://segmentfault.com/a/1190000014909658,感觉甚是有趣, ...
- CSS画一个三角形，CSS绘制空心三角形，CSS实现箭头
壹 ❀ 引 这两天因为项目工作较少,闲下来去看了GitHub上关于面试题日更收录的文章,毕竟明年有新的打算.在CSS收录中有一题是 用css创建一个三角形,并简述原理 .当然对于我来说画一个三角形是 ...
- div+css画一个小猪佩奇
用DIV+CSS画一个小猪佩奇,挺可爱的,嘻嘻. HTML部分(全是DIV) <!-- 小猪佩奇整体容器 --> <div class="pig_container&quo ...
- Effective前端3：用CSS画一个三角形
p { text-indent: 2em } .triangle-container p { text-indent: 0 } img { margin: 15px 0 } 三角形的场景很常见,打开一 ...
- 用CSS画一个带阴影的三角形的示例代码
1. 思路 怎么用CSS3画一个带阴影的三角形呢 ? 有童鞋说, 这还不简单吗 网上有很多解决方案, 但其实大多都是实现不太完美的, 存在一些问题 假设我们做一个向下的三角形箭头 常见的方法大致有两种 ...
- Effective前端1---chapter 2 用CSS画一个三角形
1.CSS画三角形的画法 第一步:三角形可以用border画出来,首先一个有四个border的div长这样: <div class="triangle"></di ...
随机推荐
- pycharm中from xx import xx报错：Unresolved reference
出现问题:无法引用到相关的类,但是这些类确实都在工程中 分析原因:import不成功是路径没对应上,pycharm默认该项目的根目录为source目录 解决方案: 将对应的项目searchTest,选 ...
- javase---string类介绍01
一.String类简介 java.lang.String类用于描述一个字符序列.String类是不可变对象的类.其对象一旦被创建,永远无法改变.但是对象的引用可以重新赋值.而且String类被fina ...
- CAS与OAuth2的区别
CAS与OAuth2的区别 一. CAS的单点登录时保障客户端的用户资源的安全 . OAuth2则是保障服务端的用户资源的安全 . 二. CAS客户端要获取的最终信息是,这个用户到底有没有权限访问我( ...
- 夜神模拟器链接Android studoid
在cmd 窗口输入:adb.exe connect 127.0.0.1:62001然后as就自动匹配了夜神经常忘记,特此提醒
- 并发库应用之十 & 多线程数据交换Exchanger应用
申明:用大白话来说就是用于实现两个人之间的数据交换,每个人在完成一定的事务后想与对方交换数据,第一个先拿出数据的人会一直等待第二个人,直到第二个人拿着数据到来时,才能彼此交换数据. java.util ...
- Redis 5种主要数据类型和命令
redis是键值对的数据库,有5中主要数据类型: 字符串类型(string),散列类型(hash),列表类型(list),集合类型(set),有序集合类型(zset) 几个基本的命令: KEYS * ...
- opencv利用hough概率变换拟合得到直线后,利用DDA算法得到直线上的像素点坐标
图片霍夫变换拟合得到直线后,怎样获得直线上的像素点坐标? 这是我今天在图像处理学习中遇到的问题,霍夫变换采用的概率霍夫变换,所以拟合得到的直线信息其实是直线的两个端点的坐标,这样一个比较直接的思路就是 ...
- LINUX PID 1和SYSTEMD 专题
Linux下有3个特殊的进程,idle进程(PID = 0), init进程(PID = 1)和kthreadd(PID = 2) idle进程其pid=0,其前身是系统创建的第一个进程,也是唯一一个 ...
- Java与Kotlin, 哪个是开发安卓应用的首选语言？
Java是很多开发者创建安卓应用的首选语言.但它在 Android 界的领导地位正受到各种新语言的挑战,Kotlin就是其一.虽然Kotlin最近才开始受到热捧,但有为数不少的人相信 Kotlin 在 ...
- BZOJ_3307_雨天的尾巴_线段树合并+树上差分
BZOJ_3307_雨天的尾巴_线段树合并 Description N个点,形成一个树状结构.有M次发放,每次选择两个点x,y 对于x到y的路径上(含x,y)每个点发一袋Z类型的物品.完成 所有发放后 ...