之前介绍了好多款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:space="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="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);

-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;

/*animation: pulse 2s linear infinite;*/

}

#head {

-webkit-transform-origin: 235px 173px;

-ms-transform-origin: 235px 173px;

transform-origin: 235px 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;

transform-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: rightleg 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-origin: 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); /* izza not workingz! */

}

@-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(0deg);

}

50%{

-webkit-transform: rotate(55deg);

transform: rotate(55deg);

}

100%{

-webkit-transform: rotate(0deg);

transform: rotate(0deg);

}

}

@-webkit-keyframes rightleg {

0%{

-webkit-transform: rotate(25deg);

transform: rotate(25deg);

}

50%{

-webkit-transform: rotate(-40deg);

transform: rotate(-40deg);

}

100%{

-webkit-transform: rotate(25deg);

transform: rotate(25deg);

}

}

@keyframes rightleg {

0%{

-webkit-transform: rotate(25deg);

transform: rotate(25deg);

}

50%{

-webkit-transform: rotate(-40deg);

transform: rotate(-40deg);

}

100%{

-webkit-transform: rotate(25deg);

transform: rotate(25deg);

}

}

@-webkit-keyframes rightarm {

0%{

-webkit-transform: rotate(0deg);

transform: rotate(0deg);

}

50%{

-webkit-transform: rotate(40deg);

transform: rotate(40deg);

}

100%{

-webkit-transform: rotate(0deg);

transform: rotate(0deg);

}

}

@keyframes rightarm {

0%{

-webkit-transform: rotate(0deg);

transform: rotate(0deg);

}

50%{

-webkit-transform: rotate(40deg);

transform: rotate(40deg);

}

100%{

-webkit-transform: rotate(0deg);

transform: rotate(0deg);

}

}

@-webkit-keyframes leftarm {

0%{

-webkit-transform: rotate(50deg);

transform: rotate(50deg);

}

50%{

-webkit-transform: rotate(0deg);

transform: rotate(0deg);

}

100%{

-webkit-transform: rotate(50deg);

transform: rotate(50deg);

}

}

@keyframes leftarm {

0%{

-webkit-transform: rotate(50deg);

transform: rotate(50deg);

}

50%{

-webkit-transform: rotate(0deg);

transform: rotate(0deg);

}

100%{

-webkit-transform: rotate(50deg);

transform: rotate(50deg);

}

}

@-webkit-keyframes head {

0%{

-webkit-transform: rotate(0deg);

transform: rotate(0deg);

}

50%{

-webkit-transform: rotate(-5deg);

transform: rotate(-5deg);

}

100%{

-webkit-transform: rotate(0deg);

transform: rotate(0deg);

}

}

@keyframes head {

0%{

-webkit-transform: rotate(0deg);

transform: rotate(0deg);

}

50%{

-webkit-transform: rotate(-5deg);

transform: rotate(-5deg);

}

100%{

-webkit-transform: rotate(0deg);

transform: rotate(0deg);

}

}

@-webkit-keyframes pulse {

0%{

-webkit-transform: scale(1);

transform: scale(1);

}

50%{

-webkit-transform: scale(1.1);

transform: scale(1.1);

}

100%{

-webkit-transform: scale(1);

transform: scale(1);

}

}

@keyframes pulse {

0%{

-webkit-transform: scale(1);

transform: scale(1);

}

50%{

-webkit-transform: scale(1.1);

transform: scale(1.1);

}

100%{

-webkit-transform: scale(1);

transform: scale(1);

}

}

@-webkit-keyframes eyebrows {

0%{

}

98%{

-webkit-transform: translate(0, 0px);

transform: translate(0, 0px);

}

99%{

-webkit-transform: translate(0, -5px);

transform: translate(0, -5px);

}

100%{

-webkit-transform: translate(0, 0px);

transform: translate(0, 0px);

}

}

@keyframes eyebrows {

0%{

}

98%{

-webkit-transform: translate(0, 0px);

transform: translate(0, 0px);

}

99%{

-webkit-transform: translate(0, -5px);

transform: translate(0, -5px);

}

100%{

-webkit-transform: translate(0, 0px);

transform: translate(0, 0px);

}

}

html5游戏角色行走,html5 css3实例教程 一款html5和css3实现的小机器人走路动画相关推荐

  1. html5行走的机器人,html5 css3实例教程 一款html5和css3实现的小机器人走路动画

    之前介绍了好多款html5和css3实现的动画,今天要给大家带来一款html5和css3实现的小机器人走路动画.该实例的人物用html5绘画的,动画效果是html5和css3实现的.一起看下效果图. ...

  2. 和css3实例教程_最好CSS和CSS3教程

    和css3实例教程 级联样式表(CSS) (Cascading Style Sheets (CSS)) CSS is an acronym for Cascading Style Sheets. It ...

  3. 《HTML5与CSS3实例教程》

    <HTML5与CSS3实例教程> 基本信息 作者: (美)Brian P. Hogan 译者: 卢俊祥 丛书名: 图灵程序设计丛书 出版社:人民邮电出版社 ISBN:97871153634 ...

  4. html5与css3基础教程课件,揭秘HTML5和CSS3教学幻灯片.ppt

    揭秘HTML5和CSS3教学幻灯片.ppt * 揭秘HTML5和CSS3 鲁超伍|Adam / / /adamlu 网站标准的简单历史 WHATWG? Web Hypertext Applicatio ...

  5. 2016年html5游戏 报告,是寒冬还是风口？2015年HTML5游戏完整产业链报告

    HTML5游戏究竟是原生手游之外的另一片蓝海,还是被资本鼓吹的美丽泡沫?想要回答这个问题,也许应该先从整个产业链上下游的各个环节看起. 第 4 页 HTML5游戏的机遇与挑战 四.HTML5游戏的机遇 ...

  6. 什么是html5营销方式,如何快狠准的创造出爆款HTML5营销案例

    近两年HTML5营销火速上位,层出不穷的创意顺着这道风口一战成名.HTML5+动画+音乐=微电影, HTML5+图片=移动海报,HTML5+游戏=互动.哪些品牌通过这些元素组合玩出位?如何巧设心机刷爆 ...

  7. css3 和html5实例,HTML5和CSS3实例教程

    领取成功 您已领取成功! 您可以进入Android/iOS/Kindle平台的多看阅读客户端,刷新个人中心的已购列表,即可下载图书,享受精品阅读时光啦! - | 回复不要太快哦~ 回复内容不能为空哦 ...

  8. html实例教程 图片绘画,Html5 canvas绘制一个机器人图形的实例教程

    Canvas的功能强大,今天我只运用到Canvas的绘制图形功能来完成一个简单线条型机器人的绘制,在绘图的过程中我还是得复述一下用到的几个图形的基础知识,通过这个实例,你可以基本上了解到Canvas的 ...

  9. CSS3实例教程:border-image属性实例讲解

    一.border-image的兼容性 border-image可以说是CSS3中的一员大将,将来一定会大放光彩,其应用潜力真的是非常的惊人.可惜目前支持的浏览器有限,仅Firefox3.5,chrom ...

最新文章

  1. Period_JAVA
  2. typescript mongodb 教程搜集
  3. Bootstrap按钮组嵌套
  4. oracle数据库赋权_Oracle角色权限创建用户赋权
  5. Linux常用知识与命令
  6. 新手电脑硬件软件故障解答(一)
  7. fireworks html制作,fireworks怎么制作网页
  8. 配置Kafka的参数auto.offset.reset时earliest和latest的区别
  9. 2020游戏主播最爱五款蓝牙耳机推荐，低延迟吃鸡王者顺畅无压力
  10. 练一练思维缜密程度。有程式xyz+yzz=532，其中x、y、z都是整数，用c++编写一个程序，求x、y、z分别代表什么数字
  11. Centernet 生成高斯热图
  12. 漫画：程序员找工作—外包公司
  13. SpringCloud微服务之间使用Feign调用不通情况举例
  14. 小马哥---高仿苹果6 R7226刷机拆机主板图与开机识别图 修改WiFi信号增强
  15. 诸葛智能荣登《2022中国企业数智化转型升级创新服务企业》榜单！
  16. 特种设备制造许可证多少钱
  17. 2014年国务院批准放假调休日期的具体安排通知
  18. 【女人吃豆腐的好处】
  19. HTML Input输入框自定义required的提示内容（默认值：请填写此字段）
  20. 当代年轻人的社恐（二）

热门文章

  1. python 面试生成器和迭代器_Python 中的迭代器与生成器
  2. mysql tokudb编译安装_mysql/tokudb安装
  3. 软件架构-zuul微服务网关（中）
  4. 使用机器学习opencv看手相
  5. 爱迪生的名言 (5 分)
  6. [附源码]java毕业设计ssm新冠疫苗预约接种信息管理
  7. cesium加载离线tms切片
  8. linux下常用命令查看端口占用
  9. WinForm应用实战开发指南 - 如何设计展示应用程序主界面
  10. 乐筑是干什么的? 推动国家建筑业“智改数转”行动计划！