之前介绍了好多款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. 什么是html5营销方式,如何快狠准的创造出爆款HTML5营销案例

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

  6. 人体一机竞技格斗机器人_工匠社发布首款“人机一体”消费级竞技格斗机器人...

    原标题:工匠社发布首款"人机一体"消费级竞技格斗机器人 4月25日下午,以"极致进化 匠领未来"为主题的工匠社 2019新品发布会在北京举行.会上,工匠社正式发 ...

  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. python实时读取日志并打印关键字怎么实现_面试宝典_Python.运维开发.0004.用Python实现tail实时输出新增日志?...
  2. 鸿蒙系统2.0什么时候上线,华为官方：鸿蒙系统2.0上线，手机能否搭载鸿蒙操作系统？...
  3. 常见的HTML5面试题(附答案)
  4. Deepin、Debian、Ubuntu恢复误删除的/var/lib/dpkg
  5. sql语句--查询语句（MySQL）
  6. 连数据都读不懂，你凭什么说会数据分析？
  7. eclipse debug进入.class_Eclipse使用教程（图文详解）
  8. 红外遥控协议-NEC协议
  9. 不知道这十项 Linux 常识，别说自己是运维工程师！
  10. 建设数据中心机房主要看这几点，否则被定为劣质机房
  11. linux下iSCSI的配置
  12. html闹钟设置,闹钟设置页.html
  13. 解决新版edge浏览器首页被搜狗、haoqq等垃圾搜索引擎捆绑问题，并将启动首页设为edge自带新标签页
  14. Photoshop抠图（用调整边缘命令抠图）
  15. 射频遥控:固定码与学习码的区别
  16. 推荐系统中的bais系统(二)—Select Bais和Exposure Bias
  17. 一个菜鸡的HTML标签备忘录【点进来可能瞎眼】
  18. 小甲鱼python 第003讲：小插曲之变量和字符串
  19. c语言中-1 ind,ind c是什么意思
  20. catkin所依赖的package必须在package.xml中添加build_depend和run_depend

热门文章

  1. IP地址为140.123.0.0的地址是B类地址，若要切割为10个子网，而且都要连接上Internet，请问子网掩码应设为
  2. WARN Error while fetching metadata with correlation id 1 : {first=LEADER_NOT_AVAILABLE} (org.apache.
  3. 链传动运动仿真（motion分析）制作包含源文件
  4. eclipse出现编译错误：resolution will not be reattempted until the update interval o f central has elapsed
  5. redis mysql 原子计数器_Redis原子计数器incr
  6. 如何修改linux中的文本格式
  7. 推荐一批灵活好用的管理软件
  8. 微信版“花呗”全面开放，人人都可以申请！
  9. 学界 | 大数据背景下，景观研究怎么做？
  10. 理解透彻！java微信公众号开发流程