版权说明:本文档由用户提供并上传,收益归属内容提供方,若内容存在侵权,请进行举报或认领
文档简介
1、html5游戏角色行走,html5 css3实例教程之前介绍了好多款html5和css3实现的动画,今日要给大家带来一款html5和css3实现的小机器人走路动画。该实例的人物用html5绘画的,动画效果是html5和css3实现的。一起看下效果图。实现的代码。html代码:复制代码代码如下:x="0px" y="0px" viewbox="0 0 458 337" enable-background="new 0 0 458 337" xml:spa
2、ce="preserve">y1="180.6" x2="266.4" y2="181.7" />y1="177.4" x2="288.4" y2="164.6" />r="3.8" />r="3.8" />gradientunits=&
3、quot;userspaceonuse">css3代码:复制代码代码如下:html -moz-box-sizing: border-box;box-sizing: border-box;*, *:before, *:after -moz-box-sizing: inherit;box-sizing: inherit;html,body height:100%;margin: 0;font: 40px/40px "helvetica neue"font-weight: 900;color: rgba(255, 255, 255, 1);
4、-webkit-font-smoothing: antialiased;font-smoothing: antialiased;svg width: 100%;height: 100%;left-eye -webkit-transform-origin: 283px 176px;-ms-transform-origin: 283px 176px;transform-origin: 283px 176px;head -webkit-transform-origin: 235px 173px;-ms-transform-origin: 235px 173px;transform-origin: 2
5、35px 173px;-webkit-animation: head 2s ease-in-out infinite;animation: head 2s ease-in-out infinite;right-eyebrow, left-eyebrow -webkit-animation: eyebrows 10s linear infinite;animation: eyebrows 10s linear infinite;left-leg -webkit-transform-origin: 253px 225px;-ms-transform-origin: 253px 225px;tran
6、sform-origin: 253px 225px;-webkit-animation: leftleg 2s ease-in-out infinite;animation: leftleg 2s ease-in-out infinite;right-leg -webkit-transform-origin: 225px 235px;-ms-transform-origin: 225px 235px;transform-origin: 225px 235px;-webkit-animation: rightleg 2s ease-in-out infinite;animation: right
7、leg 2s ease-in-out infinite;left-arm -webkit-transform-origin: 263px 186px;-ms-transform-origin: 263px 186px;transform-origin: 263px 186px;-webkit-animation: leftarm 2s ease-in-out infinite;animation: leftarm 2s ease-in-out infinite;right-arm -webkit-transform-origin: 209px 214px;-ms-transform-origi
8、n: 209px 214px;transform-origin: 209px 214px;-webkit-animation: rightarm 2s ease-in-out infinite;animation: rightarm 2s ease-in-out infinite;hair -webkit-filter: hue-rotate(45deg);filter: hue-rotate(45deg);-webkit-keyframes leftleg 0%-webkit-transform: rotate(0deg);transform: rotate(0deg);50%-webkit-transform: rotate(55deg);transform: rotate(55deg);100%-webkit-transform: rotate(0deg);transform: rotate(0deg);keyframes leftleg 0%-webkit-transform: rotate(0deg);transform: rotate(0de
温馨提示
- 1. 本站所有资源如无特殊说明,都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
- 2. 本站的文档不包含任何第三方提供的附件图纸等,如果需要附件,请联系上传者。文件的所有权益归上传用户所有。
- 3. 本站RAR压缩包中若带图纸,网页内容里面会有图纸预览,若没有图纸预览就没有图纸。
- 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
- 5. 人人文库网仅提供信息存储空间,仅对用户上传内容的表现方式做保护处理,对用户上传分享的文档内容本身不做任何修改或编辑,并不能对任何下载内容负责。
- 6. 下载文件中如有侵权或不适当内容,请与我们联系,我们立即纠正。
- 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。
最新文档
- 机械制浆工安全技能测试考核试卷含答案
- 天然气提氦操作工安全管理竞赛考核试卷含答案
- 木材削片工岗后能力考核试卷含答案
- 2026年货运代理海运服务合同协议
- 会计中级财务试题及答案
- 《管理会计》课程教学大纲 (三)
- 《贵州劲同矿业有限公司清镇市麦格乡贵耐铝土矿(延续)矿产资源绿色开发利用方案(三合一)》评审意见
- 《连锁经营与管理》专业人才培养方案
- 学堂在线中国传统装饰章节测试答案
- 城市轨道交通车站设备课件 模块2 自动售检票系统
- 网络信息安全认证
- LY/T 2007-2012森林经营方案编制与实施规范
- GB/T 5195.10-2006萤石铁含量的测定邻二氮杂菲分光光度法
- FZ/T 07004-2019纺织行业绿色工厂评价导则
- 石油钻采专用设备行业与上下游行业之间的关系分析
- 套管强度校核全解课件
- 某某高速公路项目部亮点工程策划方案
- 发现唐诗宋词2019尔雅答案
- 医药企业价格和营销行为信用承诺书【模板】
- 2018年浙江省浙江省通用安装工程预算定额
- 企业职工基本养老保险补缴申请表
评论
0/150
提交评论