哆啦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的美化 ...
随机推荐
- mac配置自带vim高亮显示
查找/etc/.vimrc的内容,如果没有的话 新建~/vimrc文件,在文件中写入如下内容即可 set ai " auto indenting set history=100 " ...
- python3.6安装docx模块
1.下载 python_docx-0.8.6-py2.py3-none-any.whl 地址: http://www.lfd.uci.edu/~gohlke/pythonlibs/2.在这个网页的最下 ...
- IR2104s半桥驱动使用经验
多次使用IR2104s,每次的调试都有种让人吐血的冲动.现在将使用过程遇到的错误给大家分享一下,方便大家找到思路. 一.自举电容部分(关键) 1.听说自举电路必须要安装场效应管,于是我在使用过程中,安 ...
- 自己写的一些公共js方法
/* 说明文件:这里用的都是es6的语法 导入导出,拿vue举个栗子,你只需要在用到的地方,按需要导入就行了,然后在mounted中直接可以拿来用 比如下面的手机****方法,在需要用到的地方impo ...
- codeforces-5
这题可害苦了我最后用了大哥的代码才过的 Diverse String #include<iostream> #include<cstdio> #include<strin ...
- 【论文速读】Pan He_ICCV2017_Single Shot Text Detector With Regional Attention
Pan He_ICCV2017_Single Shot Text Detector With Regional Attention 作者和代码 caffe代码 关键词 文字检测.多方向.SSD.$$x ...
- webdriver.chrome()禁止加载图片
from selenium import webdriver chrome_options = webdriver.ChromeOptions() prefs = {"profile.man ...
- css基础面试题
1 介绍一下标准的CSS的盒子模型?与低版本IE的盒子模型有什么不同的? 标准盒子模型:宽度=内容的宽度(content)+ border + padding + margin低版本IE盒子模型:宽度 ...
- pycharm中不以pytest方式运行，以普通方式运行的方法
问题: 在调试一个很简单的代码时无法输出结果,运行结果如下形式: 出现以上情况,主要是因为在运行时是以pytest方式运行的,要换回以普通方式去运行. 问题解决: 首先是红色圈圈里的白色三角形. 然后 ...
- GRU and LSTM
门控循环单元(GRU): 背景: 当时间步数较大或者时间步数较小的时候,循环神经网络的梯度较容易出现衰减或者爆炸.虽然裁剪梯度可以应对梯度爆炸, 但是无法解决梯度衰减的问题.正因为如此,循环神经网络在 ...