PHP画a梦,分享html打造动画哆啦A梦的示例代码

千篇一律先定义一个画哆啦a梦的大容器，确定它的大小和位置。

/*哆啦A梦*/

.doa{position: relative;top: 100px;}

画哆啦a梦的头部(包括脸，脸部包括眼睛和鼻子)

头部包含好几块部分：哆啦a梦的脸部和鼻子，脸部又包括两只眼睛，两只眼睛里面还有眼珠和眼白部分，所以会有好几层的dom嵌套，当然基本图形都是由p+border-radius拼凑而成。

将画好的各个部位品拼凑到相应的位置上即可。

看我前面画的几个图画就知道border-radius是一个非常常用的属性，几乎p的每一次变形都离不开它，其实border-radius的真面目应该是border-radius: 300px 300px 300px 300px/300px 300px 300px 300px;酱紫的，我们一般不写斜杠后面的内容，斜杠切面是水平长度，斜杠后面是垂直高度，前杠后面默认不写就是水平和垂直大小是一样的。我知道我这样说不够详细，可以参考我鑫神的博客秋月何时了，CSS3 border-radius知多少？，保证你分分钟在老司机的带领下彻底弄懂border-radius，还不快上车？

.head{

margin: 0 auto; /*头部定义大小并居中显示*/

width: 400px;

height: 350px;

background: #008ee3; /*头部定义背景颜色*/

position: relative;

border-radius: 50% 50% 25% 25% / 55% 55% 45% 45%; /*头部定义四个方向圆角大小*/

}

.face{

width: 310px; /*脸部定义大小*/

height: 260px;

background: snow; /*脸部定义背景颜色*/

border-radius: 50% 50% 25% 25% / 55% 55% 45% 45%; /*脸部定义四个方向的圆角大小*/

position: relative; /*脸部定义位置，是相对于head的位置*/

top: 90px;

left: 45px;

}

/*左眼眶*/

.face>p:first-child{

width: 80px; /*左眼框定义大小*/

height: 100px;

border-radius: 50%; /*左眼框定义与圆角大小*/

border:2px #000 solid; /*定义外边框*/

background: snow;

float: left; /*为了使左右两个眼睛能在一排显示*/

position: relative; /*位置是相对于face的位置*/

top:-40px;

left: 71px;

z-index: 50;

}

/*右眼眶，画法跟左眼一样*/

.face>p:last-child{

width: 80px;

height: 100px;

border-radius: 50%;

border:2px #000 solid;

background: snow;

float: left;

position: relative;

top:-40px;

left: 71px;

z-index: 50;

}

/*左眼珠1*/

.face>p:first-child p{

width: 20px; /*定义眼珠的大小*/

height: 25px