哆啦A梦css
<!doctype html>
<html lang="en"> <head>
<meta charset="UTF-8">
<title>机器猫</title>
<style>
.heard {
width: 400px;
height: 400px;
background: linear-gradient(to left bottom, #C9F5FC 0%, #09BEED, #222 130%);
border: 1px solid #277E89;
position: relative;
left: 500px;
border-radius: 48%; } .face {
width: 350px;
height: 300px;
background: #fff;
box-shadow: 0 0 5px #ddd inset;
border: 2px solid #14819A;
left: 25px;
top: 80px;
position: absolute;
border-radius: 50%; } .eyes {
width: 90px;
height: 120px;
border: 2px solid #555;
background: #fff;
top: 40px;
left: 110px;
position: absolute;
z-index: 99; border-radius: 45%;
transform: rotate(-3deg);
} .eyes2 {
width: 90px;
height: 120px;
border: 2px solid #555;
top: 40px;
left: 202px;
position: absolute;
z-index: 99; background: #fff;
border-radius: 45%;
transform: rotate(3deg);
} .bizi {
width: 40px;
height: 40px;
/*background:#C84105;*/
position: absolute;
top: 144px;
left: 182px;
z-index: 99;
background-image: radial-gradient(15px 15px, #fff 1%, #C84105 65%);
background-position: -32px -86px; border: 2px solid #5D1400;
border-radius: 50%;
} .eyes_inner {
width: 20px;
height: 20px;
background: #555;
z-index: 99; border-radius: 50%;
position: absolute;
right: 20px;
bottom: 22px; } .eyes_inner2 {
width: 20px;
height: 20px;
background: #555;
z-index: 99; border-radius: 50%;
position: absolute;
z-index: 99;
left: 20px;
bottom: 22px;
} .zuibazhezhao {
width: 260px;
height: 100px;
background: #fff;
z-index: 2;
margin-top: 80px;
position: absolute;
left: 40px;
top: -90; } .bizixia {
border-right: 2px solid #555;
position: absolute;
z-index: 99; left: 175px;
top: 70px;
height: 160px; } .zuiba {
position: absolute;
bottom: 70px;
left: 50px;
border-radius: 50%;
width: 250px;
height: 220px;
border-bottom: 2px solid #555;
} .xiangquan {
position: absolute;
height: 20px;
width: 300px;
border-radius: 10px;
bottom: 16px;
left: 24px;
border: 1px solid #310100;
background: #CC400E;
box-shadow: 0 -8px 8px #8A2810 inset;
z-index: 99;
} .lingdang {
width: 50px;
height: 50px;
border: 2px solid #9DA12B;
background: #FDFF76;
position: absolute;
border-radius: 50%;
overflow: hidden;
z-index: 99;
box-shadow: 0 0 2px #CBCBCB; left: 123px;
top: 6px;
} .lingdang .shadow {
height: 14px;
width: 50px;
position: absolute;
z-index: 99;
border-radius: 80%;
left: 0;
top: 0;
box-shadow: 0 0 8px #98A022;
} .kongxin {
height: 12px;
width: 12px;
position: absolute;
border-radius: 50%;
z-index: 99;
box-shadow: -2 -2 2px #000;
left: 18px;
top: 24px;
background: #444;
} .lingxia {
border-left: 2px solid #444;
height: 15px;
z-index: 99;
box-shadow: -2 -2 2px #000;
position: absolute;
bottom: 0;
left: 23px;
} .shenti {
width: 300px;
height: 230px;
background: linear-gradient(to left bottom, #C9F5FC 0%, #09BEED, #222 130%);
position: relative;
overflow: hidden;
border: 2px solid #555;
border-radius: 26px 30px 11px 11px;
border-bottom: 0; left: 52px;
top: 355px;
} .shenti2 {
width: 300px;
height: 230px;
background: linear-gradient(to left bottom, #09BEED 20%, #222 200%);
position: absolute;
border-radius: 26px 30px 0 0;
z-index: 2;
box-shadow: 5px -5px 5px left:0px;
top: 0px;
} .duzi {
width: 220px;
height: 220px;
background: #fff;
border: 2px solid #555;
position: absolute;
z-index: 2;
box-shadow: 0 0 10px #ccc inset; top: -30px;
left: 40px;
border-radius: 50%;
} .koudai {
width: 170px;
height: 170px;
border-radius: 50%;
position: absolute;
border: 2px solid #666;
top: 85px;
} .mengban {
width: 174px;
height: 172px;
position: absolute;
border-bottom: 2px solid #666;
left: 25px;
top: -65px;
} .zhezhao {
width: 174px;
height: 70px;
position: absolute;
background: #fff;
top: 15px;
left: -2px;
border-radius: 20px 20px 0 0;
} .gebo {
width: 160px;
height: 80px;
position: absolute;
left: -44px;
top: 376px;
border-bottom: 2px solid #277E89;
border-top: 2px solid #277E89;
transform: rotate(-20deg); background: #0F96B8;
} .gebo2 {
width: 160px;
height: 80px;
position: absolute;
left: 292px;
top: 376px;
border-bottom: 2px solid #277E89;
border-top: 2px solid #277E89;
transform: rotate(20deg); background: #09BEED;
} .shou {
width: 100px;
height: 100px;
border-radius: 50%;
border: 2px solid #555;
background: #fff;
margin-top: -12px;
margin-left: -50px;
} .shou2 {
width: 100px;
height: 100px;
border-radius: 50%;
border: 2px solid #555;
background: #fff;
margin-top: -12px;
margin-left: 100px;
} .tuifenkai {
width: 26px;
height: 40px;
position: absolute;
z-index: 33;
background: #fff;
top: 212px;
left: 138px;
border-top: 2px solid #555;
border-left: 2px solid #555;
border-right: 2px solid #555;
border-radius: 50%;
} .jiao {
width: 170px;
height: 40px;
border-radius: 26px 18px 18px 15px;
border: 2px solid #555;
background: #fff;
position: relative;
left: 529px;
top: 180px;
z-index: 99;
} .jiao2 {
width: 170px;
height: 40px;
border-radius: 18px 26px 15px 18px;
border: 2px solid #555;
background: #fff;
position: absolute;
left: 180px;
top: -2px;
z-index: 99;
} .huzizhezhao {
width: 120px;
height: 120px;
background: #fff;
position: absolute;
left: 120px;
top: 70px;
z-index: 98; } .huzi1 {
width: 274px;
height: 1px;
border-bottom: 2px solid #777;
z-index: 20;
top: 130px;
left: 40px;
position: absolute;
} .huzi2 {
width: 274px;
height: 1px;
border-bottom: 2px solid #777;
z-index: 20;
transform: rotate(15deg);
top: 130px;
left: 40px;
position: absolute;
} .huzi3 {
width: 274px;
height: 1px;
border-bottom: 2px solid #777;
z-index: 20;
transform: rotate(-15deg);
top: 130px;
left: 40px;
position: absolute;
}
</style>
</head> <body>
<div class="heard">
<div class="face">
<div class="huzizhezhao"></div>
<div class="huzi1"></div>
<div class="huzi2"></div>
<div class="huzi3"></div>
<div class="zuibazhezhao"></div>
<div class="bizixia"></div>
<div class="zuiba"></div>
<div class="xiangquan">
<div class="lingdang">
<div class="shadow"></div>
<div class="kongxin"></div>
<div class="lingxia"></div>
</div>
</div>
</div>
<div class="eyes">
<div class="eyes_inner"></div>
</div>
<div class="eyes2">
<div class="eyes_inner2"></div>
</div>
<div class="bizi"></div> <div class="shenti">
<div class="shenti2"></div>
<div class="duzi">
<div class="mengban">
<div class="koudai">
<div class="zhezhao"></div>
</div>
</div> </div> <div class="tuifenkai"> </div>
</div>
<div class="gebo">
<div class="shou"></div>
</div>
<div class="gebo2">
<div class="shou2"></div>
</div> </div>
<div class="jiao">
<div class="jiao2"></div>
</div> </body> </html>
哆啦A梦css的更多相关文章
- [css]我要用css画幅画(七) - 哆啦A梦
接着之前的[css]我要用css画幅画(六),今天画的有所不同,画的是哆啦A梦,我们小时候对他的称呼其实是小叮当机器猫. (PS:这次我要做的事情,很多人已经做过,这并不是什么创新,我只是在学习并记录 ...
- 纯CSS制作加<div>制作动画版哆啦A梦
纯CSS代码加上<div>制作动画版哆啦A梦(机器猫) 哆啦A梦(机器猫)我们大家一定都很熟悉,今天给大家演示怎么用纯CSS代码,来做一个动画版的哆啦A梦. 效果图: ###下面代码同学可 ...
- div+css制作哆啦A梦
纯CSS代码加上 制作动画版哆啦A梦(机器猫) 哆啦A梦(机器猫)我们大家一定都很熟悉,今天给大家演示怎么用纯CSS.代码,来做一个动画版的哆啦A梦. 效果图: 下面代码同学可以查看一下,每个线条及椭 ...
- 纯css画哆啦A梦
今天有点无聊,照着网上的图写了个哆啦A梦,无技术可言,纯考耐心. <!doctype html> <html lang="en"> <head> ...
- CSS源码之纯css3制作的哆啦a梦图片
本文章向大家介绍一个纯css3制作的哆啦a梦图像,主要巧妙的使用了css3的border-radius属性,需要的朋友介意参考一下本文章的源码. 效果图: 源码 <!doctype html&g ...
- 哆啦A梦 canvas
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 哆啦A梦欺骗了你！浏览器CSS3测试遭质疑
首先,说明,此处只是告诫各位参与CSS3.0学习使用或者将要使用或者学习CSS3.0的朋友,不要完全信任网络资源,依靠网络资源,我们需要利用网络资源的方便和可取的部分,结合自己的理解,学好,理解好! ...
- css3之3D 旋转立方体与哆啦A梦
主要记录两个css3 3D转换的示例 ㈠哆啦A梦 三个哆啦A梦的图片,分别让其围绕X轴,Y轴,Z轴旋转60度,鼠标放上开始发生变化. 具体代码如下图所示: <!DOCTYPE html> ...
- 创建【哆啦A梦】风格字体
学习canvas,为作画.对于一个毫无逻辑思维的人简直遭罪啊~想象坐标坐标坐标啊- - 好啦言归正传,基于本月16号,在春熙路IFS展出120只哆啦a梦,以及canvas的作用,在此介绍一种PS的美化 ...
随机推荐
- 浅析对spring中IOC的理解
学习过Spring框架的人一定都会听过Spring的IoC(控制反转) .DI(依赖注入)这两个概念,对于初学Spring的人来说,总觉得IoC .DI这两个概念是模糊不清的,是很难理解的,今天和大家 ...
- iphone X 底部留白 之 ionic3 项目
在全局css中加入 @media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit- ...
- Mac下创建证书失败
gdb调试运行出错,需要创建证书 按网上说的,到最后一步直接,按默认创建login类的证书 然后导出证书 再将这个证书导入到系统中
- eval() 和 int()区别，以及eval作用
eval()方法作用是将数据转换回原本的类型 a = str(list) type(a)--->str eval(a) type(a)--->list
- Oracle DataGuard 11g 双机实验
|操作系统 | release 6.7 | release 6.7 | |主机名 | stuaapp01 | stuaapp02 ||IP | 192.168.20.234 | 192.168.20. ...
- MySQL学习——标识符语法和命名规则
转自:http://blog.csdn.net/notbaron/article/details/50868485 欢迎转载,转载请标明出处:http://blog.csdn.net/notbaron ...
- java学习之匿名内部类
/*匿名内部类 * * 一般用于抽象类和接口 * 因为他们不能实例化对象所以可以通过匿名内部类来帮助他们实例化 * 下面demo是抽象类的例子 * * */ abstract class Cat{ a ...
- dbf,Idx 文件格式
NDbfReaderEx about_indexes ntx file format
- ARM Mcp2515添加驱动
Mcp2515添加驱动 2012-01-10 21:39:32 上图1: 上图2: 上图3: 之前完成了spi接口驱动,所以mcp2515也是通过spi来读写数据的.就是多加一个中断脚. 另外在2 ...
- CCF CSP 201509-1 数列分段
题目链接:http://118.190.20.162/view.page?gpid=T32 问题描述 试题编号: 201509-1 试题名称: 数列分段 时间限制: 1.0s 内存限制: 256.0M ...