哆啦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的美化 ...
随机推荐
- 【Idea】-NO.162.Idea.1 -【Idea Unable to import maven project: See logs for details】
Style:Mac Series:Java Since:2018-09-10 End:2018-09-10 Total Hours:1 Degree Of Diffculty:5 Degree Of ...
- 6个项目带你全面掌握Laravel框架
Laravel框架简介: Laravel是一套简洁.优雅的PHP Web开发框架(PHP Web Framework).它可以让你从面条一样杂乱的代码中解脱出来,帮你构建一个完美的网络APP,而且每行 ...
- 本地Linux备份服务器[Client]定期备份云服务器[Server]上的文件(下)
https://www.cnblogs.com/kevingrace/p/5972563.html Client上使用rsync命令查看服务器上文件列表rsync --list-only -e &qu ...
- 2018-2019-2 20175211 实验二《Java面向对象程序设计》实验报告
目录 代码托管 一.单元测试 (1)三种代码 二.TDD(Test Driven Development,测试驱动开发) 三.面对对象三要素 四.练习 五.问题及解决 六.PSP 代码托管 一.单元测 ...
- Cocos Creator_继承组件单例
前言 单例,在游戏开发中是比较常用的功能,全局唯一,可以在任何地方直接获取, 省去了方法赋值 或者 属性面板拖动的麻烦. 普通单例_饿汉模式 不管有没调用,一开始就创建单例 1 // Singleto ...
- Wireshark常用过滤命令
WireShark在我们网络编程中有非常重要的作用,可以帮我们抓取我们程序发送的数据包,大家常常说他是抓包工具,其实它是一款非常强大的网络数据包分析工具. 在WireShark的学习上,不想花费太多的 ...
- linux下python3(Setup)项目
新建setup.py文件 写入 from setuptools import setup setup( name='tickets', #定义你项目的名称 py_modules=['tickets', ...
- Ubuntu 自动选择最快的镜像源
通常情况下阿里云的镜像源(http://mirrors.aliyun.com/ubuntu/)用得比较多 但是也不排除因网络环境导致的某个镜像源访问慢问题 那么就可以配置为自动选择镜像源进行更新 修改 ...
- Angular4 组件生命周期
- C#发送内置图片的html格式邮件的代码
将写内容过程经常用的内容段备份一次,下面的内容是关于C#发送内置图片的html格式邮件的内容,应该对码农们也有用处.MailMessage m = new MailMessage();m.Subjec ...