css3+html5——机器猫哆啦A梦+手、脚、头动起来！

看起来难实则简单的哆啦A梦设计，调格式需要有耐心哦！

效果如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>机器猫</title><style type="text/css">*{margin: 0;padding:0;}.wrap{width: 600px;margin: 0 auto;padding-top: 20px;padding-left: 90px;}/*头部*/.headRadius{width: 190px;height:172px;background: cornflowerblue;border:1px solid black;border-radius: 120px;box-shadow: 0px 0px 6px 0px rgba(0,0,0,5);/*设置阴影*/}/*眼睛*/.eye{width: 40px;height:45px;position:absolute;margin-top: 23px;background: white;border:1px solid black;border-radius: 130px;box-shadow: 0px 0px 4px 0px rgba(0,0,0,5);/*设置阴影*/z-index: 20;}.eye1{margin-left: 53px;}.eye2{margin-left: 93px;}/*眼球*/.eyeball{width:16px;height:16px;position: absolute;margin-left: 9px;margin-top:20px;background: black;border-radius: 120px;animation: wave 0.5s infinite;/*动画调用*/transform-origin: center bottom;/*旋转中心点*/}/*动画效果定义*/@keyframes wave {0%{transform: rotate(-6deg);}50%{transform: rotate(6deg);}100%{transform: rotate(-6deg);}}.eyeball_in{width: 5px;height:5px;position: absolute;margin-top: 7px;margin-left: 6px;background: white;border-radius: 12px;box-shadow: 0px 0px 9px 0px rgba(255,255,255,5);/*设置阴影*/}/*脸*/.face{width: 155px;height:128px;position: absolute;margin-top: 40px;margin-left: 16px;background: white;border:1px solid black;border-radius: 120px;box-shadow: 0px 0px 6px 0px rgba(0,0,0,5);/*设置阴影*/z-index: 4;}/*鼻子*/.nose{width:20px;height: 20px;position: absolute;margin-top: 24px;margin-left: 65px;background: radial-gradient(white 1%,red);box-shadow: 0px 0px 4px 0px rgba(0,0,0,5);/*设置阴影*/border-radius: 20px;border:1px solid black;}/*鼻子下面的竖线*/.nose_vertical{width: 2px;height: 56px;background: black;margin-top:45px;margin-left:75px;}/*嘴巴*/.mouth{width:120px;height:120px;position: absolute;margin-top:21px;margin-left: 33px;background: transparent;/*background: pink;*/border-radius: 150px;border-top: 1px solid transparent;border-left: 1px solid transparent;border-right: 1px solid transparent;border-bottom: 2px solid black;z-index: 5;}/*胡须*/.whisker{width: 2px;height: 40px;position: absolute;background: black;box-shadow: 0px 0px 1px 0px rgba(0,0,0,5);/*设置阴影*/z-index: 5;}.w1{margin-top: 65px;margin-left: 45px;transform: rotate(115deg);/*倾斜角度*/}.w2{margin-top: 80px;margin-left: 42px;transform: rotate(90deg);/*-webkit-box-reflect: right 50px;!*靠右50px形成对称*!*/}.w3{margin-top: 95px;margin-left: 44px;transform: rotate(65deg);}.w4{margin-top: 65px;margin-left: 140px;transform: rotate(65deg);}.w5{margin-top: 80px;margin-left: 143px;transform: rotate(90deg);}.w6{margin-top: 95px;margin-left: 140px;transform: rotate(115deg);}/*领带*/.necktie{width: 118px;height: 11px;position: absolute;margin-top: 158px;margin-left: 34px;background: crimson;border-radius: 10px;border:2px solid black;box-shadow: 0px 0px 6px 0px rgba(0,0,0,5);/*设置阴影*/z-index: 5;}/*勋章*/.medal{width:22px;height:22px;position: absolute;margin-top: 163px;margin-left: 83px;background: gold;border-radius: 20px;border:1px solid black;box-shadow: 0px 0px 6px 0px rgba(0,0,0,5);/*设置阴影*/animation: wave 1s infinite;/*动画调用*/transform-origin: center top;/*旋转中心点*/z-index: 6;}/*勋章上的线*/.line{height:1px;position: absolute;background: black;}.L1{width: 20px;margin-top: 5px;margin-left: 1px;}.L2{width: 22px;margin-top: 7px;}/*勋章上的小黑圆点*/.blackCir{width:7px;height:7px;position: absolute;margin-top: 10px;margin-left: 7px;background: black;border-radius: 120px;}/*勋章上的第三条线*/.line3{width: 2px;height:6px;position: absolute;margin-top: 16px;margin-left: 9.5px;            /*强迫症很头疼*/background: black;}/*左边袖子*/.leftSleeve{width: 29px;height:58px;position: absolute;margin-top: 150px;margin-left: 25px;background: cornflowerblue;border-radius: 60px 0px 12px 12px;border:1px solid black;transform: rotate(58deg);/*倾斜角度*/z-index: 1;}/*右边袖子*/.rightSleeve{width: 29px;height:58px;position: absolute;margin-top: 150px;margin-left: 135px;background: cornflowerblue;border-radius: 12px 12px 0px 60px;border:1px solid black;transform: rotate(120deg);z-index: 1;}/*衣服中间矩形*/.clothes{width: 110px;height: 70px;position: absolute;margin-top: 190px;margin-left: 40px;background: cornflowerblue;border-left: 1px solid black;border-right: 1px solid black;z-index: 2;}/*衣服中间的大白圆*/.Circular{width: 90px;height:90px;position: absolute;margin-top: 145px;margin-left: 50px;background: white;border: 1px solid black;border-radius: 120px;z-index: 3;}/*肚子中间半圆*/.midCircular{width: 70px;height:35px;position: absolute;margin-top: 45px;margin-left: 10px;border-radius: 0px 0px 100px 100px;/*半圆*/background: white;border: 1px solid black;}/*手*/.hand{width:34px;height:34px;position: absolute;border-radius: 17px;background: white;border: 1px solid black;box-shadow: 0px 0px 6px 0px rgba(0,0,0,5);/*设置阴影*/animation: wave 2.5s infinite;/*动画调用*/transform-origin: center top;/*旋转中心点*/z-index: 2;}.leftHand{margin-top: 179px;margin-left: -7px;}.rightHand{margin-top: 179px;margin-left: 162px;}/*脚*/.foot{width: 72px;height:18px;position: absolute;background: white;border-radius: 18px 13px 13px 8px;border: 1px solid black;box-shadow: 0px 0px 9px 0px rgba(0,0,0,5);/*设置阴影*/animation: wave 2s infinite;/*动画调用*/transform-origin: center right;/*旋转中心点*/z-index: 4;}.leftFoot{margin-top: 250px;margin-left: 22px;}.rightFoot{margin-top: 250px;margin-left: 97px;}/*脚上的小圆*/.cirOnFoot{width: 20px;height:20px;position: absolute;margin-top: 240px;margin-left: 85px;background: white;border-radius: 12px;border-top: 2px solid black;border-left: 1px solid black;border-right: 1px solid black;border-bottom: 1px solid white;z-index: 3;}</style>
</head>
<body>
<div class="wrap"><!--头部--><div class="headRadius"><!--第一个眼睛--><div class=" eye eye1"><div class="eyeball"><div class="eyeball_in"></div></div><!--眼球--></div><!--第二个眼睛--><div class=" eye eye2"><div class="eyeball"><div class="eyeball_in"></div></div><!--眼球--></div><!--脸--><div class="face"><div class="nose"></div><!--鼻子--><div class="nose_vertical"></div><!--鼻子下面的竖线--></div><div class="mouth"></div><!--嘴巴--><!--胡须--><div class="whisker w1"></div><div class="whisker w2"></div><div class="whisker w3"></div><div class="whisker w4"></div><div class="whisker w5"></div><div class="whisker w6"></div><!--领带--><div class="necktie"></div><!--勋章--><div class="medal"><!--勋章上的线--><div class="line L1"></div><div class="line L2"></div><!--勋章上的小黑圆点--><div class="blackCir"></div><div class="line3"></div></div><!--衣服--><div class="leftSleeve"></div><div class="rightSleeve"></div><div class="clothes"></div><!--手--><div class="hand leftHand"></div><div class="hand rightHand"></div><!--衣服上中间的圆--><div class="Circular"><!--衣服上中间的半圆--><div class="midCircular"></div></div><!--脚--><div class="foot leftFoot"></div><div class="foot rightFoot"></div><!--脚上的圆--><div class="cirOnFoot"></div></div>
</div>
</body>
</html>

css3+html5——机器猫哆啦A梦+手、脚、头动起来！相关推荐

CSS3 画的哆啦A梦
建议用Chrome看 DEMO: http://koyoz.com/demo/css/doraemon_css3.html <!DOCTYPE html PUBLIC "-//W3C/ ...
Css3之画哆啦A梦
最近学习完css3画图,然后就百度找了看有没有好的练手机会,看到别人博客上面有画哆啦A梦,还有小黄人,就自己看了哆啦A梦的来巩固下Css3的知识,先看看效果图我们把这个图拆分开来,分为上下两部分,上 ...
用css3画一个哆啦A梦
今天偶然看到朋友用纯css3画了一个素描杯,很受启发,css3这么好玩的代码再不玩就要荒废了,于是决定画个哆啦A梦来复习一下css基础知识.用css作画最重要的就是要做好定位,其次是通过边框属性来切割 ...
java绘图机器猫_canvas哆啦A梦图形代码
HTML5 canvas哆啦A梦机器猫图形代码是利用HTML5 canvas技术绘制的机器猫. canvas画图的基本知识 context:一直觉得这个翻译成"上下文"真够蛋疼的, ...
C语言/C++常见习题问答集锦之哆啦A梦
C语言/C++常见习题问答集锦之哆啦A梦程序之美前言主体运行效果代码示例逻辑分析初始化绘制流程资源释放结束语程序之美前言还记得儿时的哆啦A梦(机器猫)么?每逢周末,就会急匆匆 ...
哆啦a梦简单图画python编程_哆啦a梦怎么画简单画法，哆啦a梦简笔画带颜色，超可爱...
有着神奇口袋的蓝胖子给我们的童年留下了深刻的记忆,哆啦A梦的口袋中总是能掏出各种神奇的道具帮助大雄解决遇到的困难,你是不是曾经也幻想有一个这样万能的朋友呢?今天我们为大家整理了一些哆啦A梦简笔画大全可 ...
哆啦A梦的超级计算机,哆啦A梦的体内究竟有什么？其实你真的低估了这个蓝胖子...
原标题:哆啦A梦的体内究竟有什么?其实你真的低估了这个蓝胖子在我们的童年呢,相信我们大家都有一个共同的梦想,就是我们都希望我们的家里有一个哆啦A梦,是不是呢,一定很多人都是这样呢?这只哆啦A梦就是一 ...
哆啦A梦主题网站(HTML5+CSS3+Javascript)
哆啦A梦主题网站 1 简介 2 技术介绍 3 项目演示和获取方式 4 打开方式 5 页面图片展示 6 部分代码展示 1 简介作为一名哆啦A梦的粉丝,也可以说是哆啦A梦的爱好者.我小时候特别喜欢看哆啦 ...
python海龟绘图（turtle）手绘【玫瑰、时钟、哆啦A梦、小猪佩奇、史迪仔】
前言 python的第三方库绘图模块turtle(因其本意有海龟.乌龟的意思,又称为海龟绘图),可以用来绘制一些很好玩的东西.之前就有盛极一时的海龟绘图绘制冰墩墩,这里给大家总结了关于海龟绘图的一些方 ...

css3+html5——机器猫哆啦A梦+手、脚、头动起来！

css3+html5——机器猫哆啦A梦+手、脚、头动起来！相关推荐

最新文章

热门文章