当前位置:首页 > 日记 > 正文

HTML5+CSS3实现机器猫

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实现机器猫,希望对你有帮助,如果您有任何问题,请给我留言,萧边会及时给您回复。谢谢您支持网站。

相关文章

创造性和动态流体海报PS图象处理软

创造性和动态流体海报PS图象处理软

动态,软件设计,图象处理,流体,创造性,今天,萧边将与您分享PS图象处理软件的创意设计的流体海报背景教程。这个教程真的很好。这种背景经常用于海报设计中,让我们向最喜欢的朋友学习。 1234阅读全文 1234阅读全文 1234阅读全文 本教程结束,以…

插图图案保存方法及注意事项

插图图案保存方法及注意事项

方法,插图,图案,注意事项,电脑软件,Adobe插画中的模式将使复杂的设计工作更容易、更有效。本教程将详细介绍Adobe插图器的模式功能和无缝模式的创建方法。它包括三个部分:图案的基本原理、图案的保存和无缝图案的创造。 如果我们已经了解了…

ps如何使用锐化工具处理

ps如何使用锐化工具处理

工具,锐化,如何使用,电脑软件,ps,PS软件处理图像具有强大的功能,在PS软件的学习过程中,用锐化工具使图像的清晰度是非常重要的过程,对于一个图片修复的朋友来说最令人担忧的是画面如何不清晰。然后用小编辑器学习一种新的方法,锐化工具,使图片更…

MySQL打开远程访问权限防火墙在Lin

MySQL打开远程访问权限防火墙在Lin

访问权限,防火墙,端口,电脑软件,MySQL,打开MySQL的远程访问权限 默认MySQL的用户没有访问远程访问的权限,所以当程序不在与数据库相同的服务器上时,我们需要打开MySQL的远程访问权限。 主流方法有两种:表转换法和授权法。 相对来说,修改表方…

ps如何快速解锁或锁定多个图层

ps如何快速解锁或锁定多个图层

解锁,图层,锁定,多个,快速,最近,用PS绘图有点麻烦,也就是说有些图层是同时锁的,而且数量不够。它不能在一个点和一个大的卷上结束。看着很多答案,没有完整的答案,所以我研究了它,发现了一个小技巧! 软件名称:Adobe PS图象处理软件8全绿色中文版软…

mysql拷贝表详细说明和实例代码

mysql拷贝表详细说明和实例代码

实例代码,拷贝,详细说明,电脑软件,mysql,MySQL复制表详细解决方案 如果我们需要完全复制MySQL的数据表,包括表的结构、索引、默认值等等,如果只有创建表的话…使用select命令,是不可能实现的。 本节将向您展示如何完成MySQL数据表的副本。以…

计算PowerPoint演示的数量

计算PowerPoint演示的数量

数量,计算,演示,电脑软件,PowerPoint,字;工具;菜单上有一个字数一项是要了解一个稿件字数很容易。在PowerPoint,我们还需要计数的数目字,但很多朋友并不知道在PowerPoint演示文稿的字数统计功能,或者不知道如何去做。 事实上,我们只要点击PowerP…

yii2添加验证码的步骤详解

yii2添加验证码的步骤详解

验证码,步骤,详解,电脑软件,yii2原本以为框架代码是非常全面的,试试百度眉目传情,大部分的教程写的00是不全面的,认为自己与验证码的教程写一个完整的程序。 我们假设站点登录表单登录需要增加验证码。 1、对sitecontroller控制器动作方法提高…

使用jQuery插件imgareaselect实现

使用jQuery插件imgareaselect实现

图像,插件,电脑软件,jQuery,imgareaselect,或者先分析一下: (以下数值,如何获取,以后在具体的分析中执行,现在只在宏上) 如何获得选择域的图像信息实际上是如何获得选择区域的位置、图像中的位置以及区域的大小。 告诉电脑的位置和大小,它知道…

批量修改特定文本样式和高亮技术词

批量修改特定文本样式和高亮技术词

文本,批量修改,使用技巧,样式,词汇,我们知道Word可以用查找替换函数查找和替换特定文本。实际上,单词查找还有其他非常有用的功能,即查找、替换特定文本的格式、样式和高亮。今天,小编辑器教您修改特定的样式并突出单词中的技巧。 修改特定文…

PS图象处理软件设置快捷键为图层蒙

PS图象处理软件设置快捷键为图层蒙

快捷键,图象处理,软件设置,图层,电脑软件,在photshop图层蒙板添加快捷键,相信平面设计师之手,经常遇到使用层遮罩时,每次都要点击的图标是不容易的,但也很小,每点击可以单击下一步按钮,如果客户端,看的人觉得很没有逼格的。让我们告诉你来这里的路…

在没有打印机和页面是在Excel2007

在没有打印机和页面是在Excel2007

设置,教程,是在,页面,电脑软件,从Excel2003很多朋友升级到Excel2007版后,不知道如何使用的功能很多,如最常用的打印设置,但是还有一种情况就是没有打印机设置,其实基本功能的Excel选项卡可以在表面发现的、分享和设置打印区域。 设置打印区域…