哆啦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的美化 ...
随机推荐
- urlib库的使用
urlib库实际上不是很常用,因为其api调用复杂,已被requests模块取代. 1.request发送请求 from urllib import request #默认指定的是get请求 #url ...
- MySQL建表 TIMESTAMP 类型字段问题
Incorrect table definition; there can be only one TIMESTAMP column with CURRENT_TIMESTAMP in DEFAULT ...
- (转载)js日期格式化转化
原文地址:http://www.cnblogs.com/zhangpengshou/archive/2012/07/19/2599053.html // 对Date的扩展,将 Date 转化为指定格式 ...
- windows 下面安装make
1.前面文章中已经提到了wingw32的安装,安装好之后设置相应环境变量.2.打开cmd,输入 mingw-get install mingw32-make,会进行安装.3.输入 mingw32-ma ...
- MYSQL.版本查看-LINUX
MYSQL.版本查看-LINUX 方式1: 不需登录mysql,登录Linux服务后,执行如下指令: # mysql -V 注意: 那个是大写的V,如果使用小写的v,在root没有设置密码的情况下,就 ...
- aos.css 动画效果
aos网址 https://codepen.io/michalsnik/pen/WxNdvq <div class="item" data-aos="fade-up ...
- 迷宫问题 （bfs广度优先搜索记录路径）
问题描述: 定义一个二维数组: int maze[5][5] = { 0, 1, 0, 0, 0, 0, 1, 0, 1, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 0, 0, 0, ...
- MAVEN简介之——pom.xml
maven构建的生命周期 maven是围绕着构建生命周期这个核心概念为基础的.maven里有3个内嵌的构建生命周期,default,clean和site. default是处理你项目部署的:clean ...
- what？iView的DropDown没有element的split-button？提issure？等不及了，自己实现一个
开始正文之前,有必要先说自己实现这个组件的必要性描述. 话说大家做表格时,增删查改按钮都是放在哪里的?最简单的方式应该是这样: 是不是感觉奇丑无比啊,于是改成了这样: 但是这种操作按钮一多后就没位置放 ...
- VDSR
提出SRCNN问题 context未充分利用 Convergence 慢 Scale Factor 训练指定fator的模型再重新训练其他fator的模型低效 context 对于更大的scale-f ...