HTML5+CSS3实现机器猫
下面的代码是HTML5和CSS3实现机器猫的代码。具体代码如下:
xml代码将内容复制到剪贴板。
哆啦A梦
{ *
保证金:0;
填充:0;
}
{。整个
宽度:800px;
保证金:20px汽车;
/ *边境:2px固体*;
背景颜色:白色;
职位:相对;
}
{。头
保证金:0汽车;
职位:相对;
宽度:500px;
身高:440px;
背景颜色:# 00b7e7;
边界半径:220px;
border: 1px solid红;
}
eye.left_eye,
eye.right_eye {。
宽度:100px;
身高:130px;
背景颜色:白色;
边境:2px黑色固体;
边界半径:50px;
位置:绝对;
上图:50px;
Z指数:3;
}
eye.leyeball,
eye.reyeball {。
宽度:20px;
身高:20px;
黑色的背景;
边界半径:10px;
位置:绝对;
上图:65px;
}
eye.left_eye {。
左:146px;
}
eye.right_eye {。
左:250px;
}
eye.leyeball {。
右:10px;
}
eye.reyeball {。
左:10px;
}
{。脸
职位:相对;
Z指数:2;
}
face.feature {。
宽度:400px;
身高:320px;
边界半径:160px;
位置:绝对;
上图:100px;
左:50px;
背景:白色;
}
face.nose {。
宽度:45px;
身高:50px;
边界半径:23px;
背景颜色:# cf3318;
边境:2px黑色固体;
位置:绝对;
上图:165px;
左:225px;
Z指数:3;
}
face.nline {。
宽度:3px;
身高:160px;
背景:黑色;
位置:绝对;
上图:218px;
左:248px;
Z指数:3;
}
face.mouth {。
宽度:280px;
身高:280px;
底部边框:5px黑色固体;
边界半径:140px;
位置:绝对;
上图:98px;
左:105px;
}
face.mustache.mutr_higher {。
宽度:80px;
身高:2px;
背景:黑色;
位置:绝对;
Top: 220px;
左:295px;
Z指数:2;
}
face.mustache.mutr_middle {。
宽度:80px;
身高:2px;
黑色的背景;
位置:绝对;
上图:240px;
左:295px;
Z指数:2;
}
face.mustache.mutr_lower {。
宽度:80px;
身高:2px;
黑色的背景;
位置:绝对;
上图:260px;
左:295px;
Z指数:2;
}
face.mustache.mutl_top {。
宽度:80px;
身高:2px;
黑色的背景;
位置:绝对;
上图:220px;
左:115px;
Z指数:2;
}
.face.Mustache.MutL_center {
宽度:80px;
身高:2px;
黑色的背景;
位置:绝对;
上图:240px;
左:115px;
Z指数:2;
}
face.mustache.mutl_bottom {。
宽度:80px;
身高:2px;
背景:黑色;
位置:绝对;
上图:260px;
左:115px;
Z指数:2;
}
face.mustache.mutl_bottom,
face.mustache.mutr_higher {。
变换:旋转(160deg);
}
face.mustache.mutl_top,
face.mustache.mutr_lower {。
变换:旋转(200℃);
}
{。颈
宽度:300px;
身高:30px;
背景颜色:# a31f12;
边境:2px黑色固体;
边界半径:15px;
职位:相对;
上图:0px;
左:250px;
Z指数:4;
}
.neck.Bell {
宽度:60px;
身高:60px;
溢出:隐藏;
边境:2px黑色固体;
边界半径:60px;
背景颜色:# cfcb3c;
位置:绝对;
上图:5px;
左:120px;
}
bell.bline {。
宽度:60px;
身高:2px;
背景颜色:# cfcb3c;
边境:2px黑色固体;
3px 3px边界半径:00;
位置:绝对;
上图:15px;
}
bell.bcircle {。
宽度:20px;
身高:16px;
背景:黑色;
边界半径:8px;
位置:绝对;
上图:25px;
左:20px;
}
bell.bunderpart {。
宽度:3px;
身高:20px;
背景颜色:黑色;
位置:绝对;
左:28px;
上图:40px;
}
{。体
职位:相对;
上图:随着改变;
Z指数:1;
}
body.tummy {。
宽度:280px;
身高:240px;
背景颜色:# 00b1e1;
边境:2px黑色固体;
位置:绝对;
上图:267px;
左:260px;
}
body.bellyband {。
宽度:220px;
身高:220px;
背景颜色:白色;
边境:2px黑色固体;
边界半径:110px;
位置:绝对;
左:290px;
上图:267px;
}
body.pocket {。
宽度:160px;
身高:160px;
边界半径:80px;
背景颜色:白色;
边境:2px黑色固体;
位置:绝对;
上图:305px;
左:320px;
}
{。盖
宽度:164px;
身高:80px;
背景颜色:白色;
底部边框:2px黑色固体;
/ *边境:5px固体*橙;
位置:绝对;
上图:300px;
左:320px;
}
left_hand,
{。right_hand
身高:100px;
宽度:100px;
位置:绝对;
上图:272px;
左:248px;
}
{。left_hand
左:- 10px;
}
left_hand.larm {。
宽度:70px;
身高:100px;
背景颜色:# 00bee8;
border: 1px solid黑;
职位:相对;
上图:200px;
左:535px;
变换:rotatez(135deg);
/ *特性:* 1;
}
{。right_hand
左:- 10px;
}
right_hand.rarm {。
宽度:70px;
身高:100px;
背景颜色:# 00bee8;
border: 1px solid黑;
/ *特性:* 1;
职位:相对;
上图:200px;
左:215px;
变换:rotatez(45deg);
}
left_hand.lpalm,
right_hand.rpalm {。
宽度:80px;
身高:80px;
边界半径:40px;
边境:2px黑色固体;
背景颜色:白色;
位置:绝对;
}
right_hand.rpalm {。
左:580px;
上图:260px;
Z指数:1;
}
left_hand.lpalm {。
左:160px;
上图:260px;
Z指数:1;
}
foot.left_foot,
foot.right_foot {。
宽度:150px;
身高:40px;
背景颜色:白色;
边境:2px黑色固体;
边界半径:80px 60px 60px 40px;
职位:相对;
}
foot.left_foot {。
左:240px;
上图:210px;
}
foot.right_foot {。
上图:165px;
左:410px;
}
foot.crotch {。
宽度:40px;
身高:20px;
背景颜色:白色;
边境:2px黑色固体;
边界底部:无;
40px 40px边界半径:00;
职位:相对;
上图:103px;
左:382px;
Z指数:2
}
以上是萧边介绍HTML5 + CSS3实现机器猫,希望对你有帮助,如果您有任何问题,请给我留言,萧边会及时给您回复。谢谢您支持网站。
tag:机器猫电脑软件
相关内容