介绍 & lt; !DOCTYPE html>
& lt; html lang=癳n"祝辞
& lt; head>
& lt;元charset=癠TF-8"祝辞
& lt; title>机器猫& lt;/title>
& lt;风格类型=拔谋?css"比;
* {
保证金:0;
填充:0;
}
.whole {
宽度:800 px;
保证金:20 px汽车;/*边境:2 px固体黄色;*/背景颜色:白色;
位置:相对;
}
.head {
保证金:0汽车;
位置:相对;
宽度:500 px;
身高:440 px;
background - color: # 00 b7e7;
border - radius: 220 px;
边界:1 px固体红;
}
.eye .left_eye,
.eye .right_eye {
宽度:100 px;
身高:130 px;
背景颜色:白色;
边界:2 px固体黑色;
border - radius: 50 px;
位置:绝对的;
上图:50 px;
z - index: 3;
}
.eye .LeyeBall,
.eye .ReyeBall {
宽度:20 px;
高度:20 px;
背景:黑色;
border - radius: 10 px;
位置:绝对的;
前:65像素;
}
.eye .left_eye {
左:146 px;
}
.eye .right_eye {
左:250 px;
}
.eye .LeyeBall {
右:10 px;
}
.eye .ReyeBall {
左:10 px;
}
.face {
位置:相对;
z - index: 2;
}
.face feature {
宽度:400 px;
身高:320 px;
border - radius: 160 px;
位置:绝对的;
前:100像素;
左:50 px;
背景:白色;
}
.face .nose {
宽度:45 px;
高度:50 px;
border - radius: 23 px;
background - color: # cf3318;
边界:2 px固体黑色;
位置:绝对的;
前:165像素;
左:225 px;
z - index: 3;
}
.face .Nline {
宽度:3 px;
身高:160 px;
背景:黑色;
位置:绝对的;
前:218像素;
左:248 px;
z - index: 3;
}
.face .mouth {
宽度:280 px;
身高:280 px;
边界底部:5 px固体黑色;
border - radius: 140 px;
位置:绝对的;
前:98像素;
左:105 px;
}
.face .mustache .MutR_higher {
宽度:80 px;
高度:2 px;
背景:黑色;
位置:绝对的;
前:220像素;
左:295 px;
z - index: 2;
}
.face .mustache .MutR_middle {
宽度:80 px;
高度:2 px;
背景:黑色;
位置:绝对的;
前:240像素;
左:295 px;
z - index: 2;
}
.face .mustache .MutR_lower {
宽度:80 px;
高度:2 px;
背景:黑色;
位置:绝对的;
前:260像素;
左:295 px;
z - index: 2;
}
.face .mustache .MutL_top {
宽度:80 px;
高度:2 px;
背景:黑色;
位置:绝对的;
前:220像素;
左:115 px;
z - index: 2;
}
.face .mustache .MutL_center {
宽度:80 px;
高度:2 px;
背景:黑色;
位置:绝对的;
前:240像素;
左:115 px;
z - index: 2;
}
.face .mustache .MutL_bottom {
宽度:80 px;
高度:2 px;
背景:黑色;
位置:绝对的;
前:260像素;
左:115 px;
z - index: 2;
}
.face .mustache .MutL_bottom,
.face .mustache .MutR_higher {
变换:旋转(160度);
}
.face .mustache .MutL_top,
.face .mustache .MutR_lower {
变换:旋转(200度);
}
.neck {
宽度:300 px;
高度:30 px;
background - color: # a31f12;
边界:2 px固体黑色;
border - radius: 15 px;
位置:相对;
上图:0 px;
左:250 px;
z - index: 4;
}
.neck .bell {
宽度:60 px;
高度:60 px;
溢出:隐藏;
边界:2 px固体黑色;
border - radius: 60 px;
background - color: # cfcb3c;
位置:绝对的;
上图:5 px;
左:120 px;
}
.bell .Bline {
宽度:60 px;
高度:2 px;
background - color: # cfcb3c;
边界:2 px固体黑色;
border - radius: 3 px 3 px 0 0;
位置:绝对的;
上图:15 px;
}
.bell .Bcircle {
宽度:20 px;
高:16 px;
背景:黑色;
border - radius: 8 px;
位置:绝对的;
上图:25 px;
左:20 px;
}
.bell .Bunderpart {
宽度:3 px;
高度:20 px;
背景颜色:黑色;
位置:绝对的;
左:28 px;
上图:40像素;
}
.body {
位置:相对;
前:-300像素;
z - index: 1;
}
.body .tummy {
宽度:280 px;
身高:240 px;
background - color: # 00 b1e1;
边界:2 px固体黑色;
位置:绝对的;
前:267像素;
左:260 px;
}
.body .bellyband {
宽度:220 px;
身高:220 px;
背景颜色:白色;
边界:2 px固体黑色;
border - radius: 110 px;
位置:绝对的;
左:290 px;
前:267像素;
}
.body .pocket {
宽度:160 px;
身高:160 px;
border - radius: 80 px;
背景颜色:白色;
边界:2 px固体黑色;
位置:绝对的;
前:305像素;
左:320 px;
}
.cover {
宽度:164 px;
身高:80 px;
背景颜色:白色;
边界底部:2 px固体黑色;/*边境:5 px固体橙色;*/位置:绝对的;
前:300像素;
左:320 px;
}
.left_hand,
.right_hand {
身高:100 px;
宽度:100 px;
位置:绝对的;
前:272像素;
左:248 px;
}
.left_hand {
左:-10 px;
}
.left_hand .Larm {
宽度:70 px;
身高:100 px;
background - color: # 00 bee8;
边界:1 px固体黑色;
位置:相对;
前:200像素;
左:535 px;
变换:rotateZ(135度);/* z - index: 1, */}
.right_hand {
左:-10 px;
}
.right_hand .Rarm {
宽度:70 px;
身高:100 px;
background - color: # 00 bee8;
边界:1 px固体黑色;/* z - index: 1, */位置:相对;
前:200像素;
左:215 px;
变换:rotateZ(45度);
}
.left_hand .Lpalm,
.right_hand .Rpalm {
宽度:80 px;
身高:80 px;
border - radius: 40像素;
边界:2 px固体黑色;
背景颜色:白色;
位置:绝对的;
}
.right_hand .Rpalm {
左:580 px;
前:260像素;
z - index: 1;
}
.left_hand .Lpalm {
左:160 px;
前:260像素;
z - index: 1;
}
.foot .left_foot,
.foot .right_foot {
宽度:150 px;
高度:40像素;
背景颜色:白色;
边界:2 px固体黑色;
border - radius: 80 px 60 px 60 px 40 px;
位置:相对;
}
.foot .left_foot {
左:240 px;
前:210像素;
}
.foot .right_foot {
前:165像素;
左:410 px;
}
.foot .crotch {
宽度:40像素;
高度:20 px;
背景颜色:白色;
边界:2 px固体黑色;
边界底部:没有;
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
这篇文章将为大家详细讲解有关HTML5和CSS3实现机器猫的案例,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。
具体代码如下所示:
