用css3画一个哆啦A梦

今天偶然看到朋友用纯css3画了一个素描杯，很受启发，css3这么好玩的代码再不玩就要荒废了，于是决定画个哆啦A梦来复习一下css基础知识。用css作画最重要的就是要做好定位，其次是通过边框属性来切割棱角分明的盒子，让线条看起来流畅，还有就是通过z-index属性来控制图层，@keyframes可以让你的图片动起来，更加生动，接下来就一起复习一下这几个属性吧，然后就可以自己动手作画了。

1. position属性：规定元素的定位类型

（1）说明：

 - 默认值：static- 继承性：no- 版本：css2- javascript语法：object.style.position="absolute"

（2）可能的值：

 - static：默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。- absolute：生成绝对定位的元素，相对于static定位以外的第一个父元素进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。- fixed：生成绝对定位的元素，相对于浏览器窗口进行定位。- relative：生成相对定位的元素，相对于其正常位置进行定位。- inherit：规定应该从父元素继承 position 属性的值。

2.border属性

（1）border-style

属性值 功能描述
none    无边框
hidden  与“none”相同，应用于表格时用于解决边框冲突问题
dotted  点状边框
dashed  虚线边框
solid   实线边框
double  双线
groove  3D凹槽边框，其效果取决于border-color的值
ridge   3D垄状边框
inset   3D inset边框
outset  3D outset边框
inherit 规定应该从父元素继承边框样式，部分浏览器不支持这个属性

（2）border-color
（3）border-radius

border-top-left-radius:<水平圆角半径值>/<垂直圆角半径值>;
border-top-right-radius:<水平圆角半径值>/<垂直圆角半径值>;
border-bottom-left-radius:<水平圆角半径值>/<垂直圆角半径值>;
border-bottom-left-radius:<水平圆角半径值>/<垂直圆角半径值>;

（4）box-shadow

 - none：默认值。元素没有任何阴影效果。- inset：阴影类型，可选值。默认为外阴影，取值'inset'设置内阴影。- x-offset：阴影水平偏移量。取正值，阴影在元素右边；取负值，反之。- y-offset：阴影垂直偏移量。取正值，阴影在元素底部；取负值，反之。- blur-radius：阴影模糊半径，可选参数。0：不具有模糊效果，值越大越模糊。- spread-radius：阴影扩展半径，可选参数。取正值，整个阴影都延展扩大；取负值，反之。- color：阴影颜色，可选参数。各浏览器默认颜色不相同。

3. z-index属性：设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。

（1）说明：该属性设置一个定位元素沿 z 轴的位置，z 轴定义为垂直延伸到显示区的轴。如果为正数，则离用户更近，为负数则表示离用户更远。

 - 默认值：auto- 继承性：no - 版本：css2- javascript语法：object.style.zindex="1"

（2）可能的值

 - auto：默认。堆叠顺序与父元素相等。- number：设置元素的堆叠顺序。- inherit：规定应该从父元素继承 z-index 属性的值。

4. @keyframes规则

（1）animation实现动画效果：

 - 通过类似flash动画中的关键帧来声明一个动画；- 在animation属性中调用关键帧声明的动画，从而实现一个更为复杂的动画效果。

（2）浏览器兼容性：

 - 在chrome4+，Safari4.0+，Firefox5.0+至Firefox 16浏览器中需要添加各浏览器的私有属性。- 在IE 10+，Firefox 16+和opera 12+浏览器中支持animation的标准语法。- 在opera 16+，iOS Safari 3.2+，android browser 2.1+，blackberry browser 7.0+浏览器使用animation需要添加前缀-webkit。

（3）animation子属性

 - animation-name:指定一个关键帧动画的名字，这个动画名必须对应一个@keyframes规则。- animation-duration:设置动画播放所需时间，一般以秒为单位。- animation-timing-function:设置动画的播放方式。- animation-delay:指定动画开始时间，一般以秒为单位。- animation-iteration-count:设置动画播放的循环次数。- animation-direction:设置动画的播放方向。- animation-play-state:设置动画的播放状态。- animation-fill-mode:设置动画的时间外属性。

（4）@keyframes语法

@keyframes IDENT{0%{/*css样式*／}percentage{/*css样式*／}100%{/*css样式*／}
}

5.效果演示：

6.代码展示：

<!DOCTYPE html>
<html>
<head><title>叮当猫</title><link rel="stylesheet" type="text/css" href="Doraemon.css">
</head>
<body><div class="wrapper"><!--哆啦A梦--><div class="doraemon"><!--头部--><div class="head"><!--眼睛部分--><div class="eyes"><!--左眼--><div class="eye left"><!--左眼球--><div class="eyeball bleft"></div></div><!--右眼--><div class=" eye right"><!--右眼球--><div class="eyeball bright"></div></div></div><!--脸部--><div class="face"><!--白色脸面--><div class="whiteFace"></div><!--鼻头--><div class="nose"><!--鼻头高光部分--><div class="light"></div></div><!--人中--><div class="philtrum"></div><!--嘴巴--><div class="mouth"></div><!--胡须--><div class="whiskers"><div class="whisker r1 r160"></div><div class="whisker r2"></div><div class="whisker r3 r20"></div><div class="whisker l1 r20"></div><div class="whisker l2"></div><div class="whisker l3 r160"></div></div></div><!--脸部结束--></div><!--头部结束--><!--项圈--><div class="collar"><!--铃铛--><div class="bell"><div class="bell_line"></div><div class="bell_circle"></div><div class="bell_under"></div><div class="bell_light"></div></div></div><!--项圈结束--><!--身体--><div class="body"><!--肚子--><div class="belly"></div><!--肚兜--><div class="bellyband"></div><!--口袋--><div class="pocket"></div><!--修饰口袋--><div class="pocketAdorn"></div></div><!--身体结束--><!--左手--><div class="leftHand"><!--手臂--><div class="arm"></div><!--手掌--><div class="palm"></div><!--修饰手臂--><div class="armAdorn"></div></div><!--左手结束--><!--右手--><div class="rightHand"><!--手臂--><div class="arm"></div><!--手掌--><div class="palm"></div><!--修饰手臂--><div class="armAdorn"></div></div><!--右手结束--><!--脚部--><div class="foot"><!--左脚--><div class="leftFoot"></div><!--右脚--><div class="rightFoot"></div><!--腿间隙--><div class="legGap"></div></div><!--脚部结束--></div><!--哆啦A梦结束--></div>
</body>
</html>

.wrapper{margin: 50px 100px;
}
.doraemon{position: relative;
}
.head{position: relative;width: 320px;height: 300px;border-radius: 150px;background: #07bbee;/*此放射渐变也是使脸的左下角暗一些，看上去更真实*/background: -webkit-radial-gradient(right top,#fff 10%,#07bbee 20%,#10a6ce 75%,#000);background: -moz-radial-gradient(right top,#fff 10%,#07bbee 20%,#10a6ce 75%,#000);background: -ms-radial-gradient(right top,#fff 10%,#07bbee 20%,#10a6ce 75%,#000);border: 2px solid #555;box-shadow: -5px 10px 15px rgba(0,0,0,0.45);
}
.face{/*让所有脸部元素可自由定位*/position: relative;/*脸在头部背景上面*/z-index: 2;
}
.whiteFace{width: 265px;height: 195px;border-radius: 150px;position: absolute;top: 75px;left: 25px;background: #fff;/*此放射渐变也是使脸的左下角暗一些，看上去更真实*/background: -webkit-radial-gradient(right top,#fff 75%,#eee 80%,#999 90%,#444);background: -moz-radial-gradient(right top,#fff 75%,#eee 80%,#999 90%,#444);background: -ms-radial-gradient(right top,#fff 75%,#eee 80%,#999 90%,#444);
}
.nose{width: 30px;height: 30px;border-radius: 15px;background:#c93300;border:2px solid #000;position: absolute;top: 110px;left: 140px;/*鼻子在白色脸底上面*/z-index: 3;
}
.nose .light{width: 10px;height: 10px;border-radius: 5px;/*通过阴影实现高光*/box-shadow: 19px 8px 5px #fff;
}
.philtrum{width: 3px;height: 100px;background: #333;position: absolute;top: 143px;left: 155px;z-index: 3;
}
.mouth{width: 220px;height: 400px;/*通过底边框加上圆角模拟微笑嘴巴*/border-radius: 120px;border-bottom: 3px solid #333;position: absolute;top: -160px;left: 45px;
}
.eyes{position: relative;z-index: 3;
}
.eye{width: 72px;height: 82px;background: #fff;border: 2px solid #000;border-radius: 35px;position: absolute;top: 40px;-webkit-animation: eyemove 3s linear infinite;-moz-animation: eyemove 3s linear infinite;-ms-animation: eyemove 3s linear infinite;-o-animation: eyemove 3s linear infinite;animation: eyemove 3s linear infinite;
}
/*让眼睛动起来*/
@-webkit-keyframes eyemove {70%{margin:0 0 0 0;}80% {margin: -22px 0 0 0;}85% {margin: -22px 0 0 5px;} 90% {margin: -22px 10px 0 0;}93% {margin: -22px 0 0 0;}96% {margin: 0 0 0 0;}
}
@-moz-keyframes eyemove {70% {margin: 0 0 0 0;}80% {margin: -22px 0 0 0;}85% {margin: -22px 0 0 5px;}90% {margin: -22px 10px 0 0;}93% {margin: -22px 0 0 0;}96% {margin: 0 0 0 0;}
}@-o-keyframes eyemove {70% {margin: 0 0 0 0;}80% {margin: -22px 0 0 0;}85% {margin: -22px 0 0 5px;}90% {margin: -22px 10px 0 0;}93% {margin: -22px 0 0 0;}96% {margin: 0 0 0 0;}
}
@keyframes eyemove {70% {margin: 0 0 0 0;}80% {margin: -22px 0 0 0;}85% {margin: -22px 0 0 5px;}90% {margin: -22px 10px 0 0;}93% {margin: -22px 0 0 0;}96% {margin: 0 0 0 0;}
}
.eyes .left{left: 82px;
}
.eyes .right{left: 156px;
}
.eyeball{width: 14px;height: 14px;background: #000;border-radius: 7px;position: absolute;top: 40px;
}
.eye .bleft{left: 50px;
}
.eye .bright{left: 7px;
}
.whiskers{width: 220px;height: 80px;background: #fff;border-radius: 15px;position: absolute;top: 120px;left: 45px;z-index: 2;
}
.whisker{width: 60px;height: 2px;background: #333;position: absolute;z-index: 2;
}
.l1{top: 25px;left: 0;
}
.l2{top: 45px;left: -2px;
}
.l3{top: 65px;left: 0;
}
.r1{top: 25px;left: 165px;
}
.r2{top: 45px;left: 167px;
}
.r3{top: 65px;left: 165px;
}
.r20{-webkit-transform: rotate(200deg);-moz-transform: rotate(200deg);-ms-transform: rotate(200deg);-o-transform: rotate(200deg);transform: rotate(200deg);
}
.r160{-webkit-transform: rotate(160deg);-moz-transform: rotate(160deg);-ms-transform: rotate(160deg);-o-transform: rotate(160deg);transform: rotate(160deg);
}
.collar{width: 230px;height: 20px;background: #c40;/*线性渐变 让围巾看上去更自然*/background: -webkit-gradient(linear,left top,left bottom,from(#c40),to(#800400));background: -moz-linear-gradient(center top,#c40,#800400);background: -ms-linear-gradient(center top,#c40,#800400);border: 2px solid #000;border-radius: 10px;position: relative;top: -40px;left: 45px;z-index: 4;
}
.bell{width: 40px;height: 40px;_overflow: hidden; /*IE6 hack*/border-radius: 50px;border:2px solid #000;background: #f9f12a;background: -webkit-gradient(linear, left top, left bottom, from(#f9f12a),color-stop(0.5, #e9e11a), to(#a9a100));background: -moz-linear-gradient(top, #f9f12a, #e9e11a 75%,#a9a100);background: -ms-linear-gradient(top, #f9f12a, #e9e11a 75%,#a9a100);box-shadow: -5px 5px 10px rgba(0,0,0,0.25);position: absolute;top: 5px;left: 90px;
}
.bell_line{width: 36px;height: 2px;background: #f9f12a;border: 2px solid #333;border-radius: 3px 3px 0 0;position: absolute;top: 10px;
}
.bell_circle{width: 12px;height: 10px;background: #000;border-radius: 5px;position: absolute;top: 20px;left: 14px;
}
.bell_under{width: 3px;height: 15px;background: #000;position: absolute;top: 27px;left: 18px;
}
.bell_light{width: 12px;height: 12px;border-radius: 10px;box-shadow: 19px 8px 5px #fff;position: absolute;top: -5px;left: 5px;opacity: 0.7;
}
.body{position: relative;top: -310px;
}
.belly{width: 220px;height: 165px;background: #07beea;background: -webkit-gradient(linear,right top,left top,from(#07beea),color-stop(0.5, #0073b3),color-stop(0.75,#00b0e0), to(#0096be));background: -moz-linear-gradient(right center,#07beea,#0073b3 50%,#00b0e0 75%,#0096be 100%);background: -ms-linear-gradient(right center,#07beea,#0073b3 50%,#00b0e0 75%,#0096be 100%);border: 2px solid #333;position: absolute;top: 265px;left: 50px;
}
.bellyband{width: 170px;height: 170px;background: #fff;background: -webkit-gradient(linear, right top, left bottom, from(#fff),color-stop(0.75,#fff),color-stop(0.83,#eee),color-stop(0.90,#999),color-stop(0.95,#444), to(#000));background: -moz-linear-gradient(right top,#fff,#fff 75%,#eee 83%,#999 90%,#444 95%,#000);background: -ms-linear-gradient(right top,#fff,#fff 75%,#eee 83%,#999 90%,#444 95%,#000);border:2px solid #000;border-radius: 85px;position: absolute;top: 230px;left: 72px;
}
.pocket{width: 130px;height: 130px;border-radius: 65px;background: #fff;background: -webkit-gradient(linear, right top, left bottom, from(#fff),color-stop(0.70,#fff),color-stop(0.75,#f8f8f8),color-stop(0.80,#eee),color-stop(0.88,#ddd), to(#fff));background: -moz-linear-gradient(right top, #fff, #fff 70%,#f8f8f8 75%,#eee 80%,#ddd 88%, #fff);background: -ms-linear-gradient(right top, #fff, #fff 70%,#f8f8f8 75%,#eee 80%,#ddd 88%, #fff);border:2px solid #000;position: absolute;top: 250px;left: 92px;
}
.pocketAdorn{width: 134px;height: 60px;background: #fff;border-bottom: 2px solid #000;position: absolute;top: 259px;left: 92px;
}
.leftHand{width: 100px;height: 100px;position: absolute;top:272px;left: -10px;
}
.rightHand{width: 100px;height: 100px;position: absolute;top:272px;left: 248px;
}
.arm{width: 80px;height: 50px;background: #07beea;background: -webkit-gradient(linear, left top, left bottom, from(#07beea),color-stop(0.85,#07beea), to(#555));background: -moz-linear-gradient(center top, #07BEEA, #07BEEA 85%, #555);background: -ms-linear-gradient(center top, #07BEEA, #07BEEA 85%, #555);border:1px solid #000000;box-shadow: -10px 7px 10px rgba(0, 0, 0, 0.35);z-index: -1;position: relative;top: 17px;
}
.leftHand .arm{/*背光一面使用纯色，使其有立体感*/background: #0096be;   box-shadow: 5px -7px 10px rgba(0, 0, 0, 0.25);-webkit-transform: rotate(145deg);-moz-transform: rotate(145deg);-ms-transform: rotate(145deg);-o-transform: rotate(145deg);transform: rotate(145deg);
}
.rightHand .arm{-webkit-transform: rotate(35deg);-moz-transform: rotate(35deg);-ms-transform: rotate(35deg);-o-transform: rotate(35deg);transform: rotate(35deg);
}
.palm{width: 60px;height: 60px;border-radius: 30px;border: 2px solid #000;background: #fff;background: -webkit-gradient(linear, right top, left bottom, from(#fff),color-stop(0.5,#fff),color-stop(0.70,#eee),color-stop(0.8,#ddd), to(#999));background: -moz-linear-gradient(right top, #fff, #fff 50%, #eee 70%, #ddd 80%,#999);background: -ms-linear-gradient(right top, #fff, #fff 50%, #eee 70%, #ddd 80%,#999);position: absolute;top: 32px;
}
.leftHand .palm{left: -20px;
}
.rightHand .palm{left: 40px;
}
.armAdorn{width: 5px;height: 45px;background: #07beea;position: relative;top: -45px;
}
.leftHand .armAdorn{/*同理，背光一面使用纯色，使其有立体感*/background: #0096be; left: 60px;
}
.rightHand .armAdorn{left: 22px;
}
.foot{width: 280px;height: 40px;position: relative;top: 55px;left: 20px;
}
.leftFoot,.rightFoot{width: 125px;height: 30px;background: #fff;background: -webkit-gradient(linear, right top, left bottom, from(#fff),color-stop(0.75,#fff),color-stop(0.85,#eee), to(#999));background: -moz-linear-gradient(right top, #fff, #fff 75%, #eee 85%, #999);background: -ms-linear-gradient(right top, #fff, #fff 75%, #eee 85%, #999);border: 2px solid #333;border-radius: 80px 60px 60px 40px;box-shadow: -6px 0 10px rgba(0, 0, 0, 0.35);position: relative;
}
.leftFoot{top: 65px;left: 8px;
}
.rightFoot{top: 31px;left: 141px;
}
.legGap{width: 20px;height: 10px;background: #fff;background: -webkit-gradient(linear, right top, left bottom, from(#666),color-stop(0.83,#fff), to(#fff));background: -moz-linear-gradient(right top, #666, #fff 83%, #fff);background: -ms-linear-gradient(right top, #666, #fff 83%, #fff);/*制作半圆效果*/border: 2px solid #000;   border-bottom: none;border-radius: 40px 40px 0 0;position: relative;top: -11px;left: 130px;
}

用css3画一个哆啦A梦相关推荐

CSS3 画的哆啦A梦
建议用Chrome看 DEMO: http://koyoz.com/demo/css/doraemon_css3.html <!DOCTYPE html PUBLIC "-//W3C/ ...
SVG学习笔记（一）画一个哆啦A梦
用SVG画一个哆啦A梦博客原文链接概述虽然之前学过SVG,但我在工作中很少用到,正好最近赋闲在家待业中,就重新学了下SVG的东西: 基础入门教程: 链接:SVG 图像入门教程总的来说,基本语 ...
用python画哆啦a梦的身体_用Python画一个哆啦A梦
Python自带的turtle海龟绘图库功能十分强大,使用起来也很简单方便,今天我们就使用海龟绘图画一个我们都很喜欢的卡通形象-哆啦A梦头像.我们将整个头像分为几个部分分别定义相关的绘制函数,下面分别 ...
css html弄出哆啦a梦,用css画一个哆啦A梦
原图: 效果图: 虽然说没用啥什么高级的技巧,但这让我感受到了CSS的乐趣! 好好学习,天天向上! body{ background-color: #66B3FF; height: 300px; ov ...
用python画一个哆啦A梦
import turtle# 创建哆啦A梦 doraemon = turtle.Turtle() doraemon.speed(10)def draw_eye_white_circle(x):dora ...
用EasyX图形库画一个哆啦A梦
继续说图形库,加一点实战用图形画图(用来巩固代码): rectangle这个函数四个参数,左上角坐标的x,y值,右下角坐标的x,y值:因为只要有两个点,就可以以它们的横坐标之差为长,纵坐标之差为宽画 ...
哆啦a梦css html,用css画一个哆啦A梦
原图: 效果图: 虽然说没用啥什么高级的技巧,但这让我感受到了css的乐趣! 好好学习,天天向上! body{ background-color: #66b3ff; height: 300px; ov ...
用python画哆啦a梦的头_用 Python 画个哆啦A梦
文 |豆豆来源:Python 技术「ID: pythonall」相信大家童年的时候都看过哆啦 A 梦,他的口袋简直是无所不能,里面装满了各种神奇的道具.曾经的我也幻想过如果自己也有一个这样的口袋多 ...
[css]我要用css画幅画(七) - 哆啦A梦
接着之前的[css]我要用css画幅画(六),今天画的有所不同,画的是哆啦A梦,我们小时候对他的称呼其实是小叮当机器猫. (PS:这次我要做的事情,很多人已经做过,这并不是什么创新,我只是在学习并记录 ...