<!doctype html>

<html>

<head>

    <meta charset="utf-8">

    <title>demo</title>

    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

    <style>

    .runner {

         -webkit-animation-timing-function: steps(9,end);

         -webkit-animation-duration: .6s;

         -webkit-animation-name: m6runner;

         -webkit-animation-delay: 0s;

         -webkit-animation-iteration-count: infinite;

         -webkit-animation-direction: alternate;

         animation-timing-function: steps(9,end);

         animation-duration: .6s;

         animation-name: m6runner;

         animation-delay: 0s;

         animation-iteration-count: infinite;

         animation-direction: alternate;

     }

    @-webkit-keyframes m6runner {

        0% {

            background-position: 0 0;

        }

        100% {

            background-position: -540px 0;

        }

    }

    @keyframes m6runner {

        0% {

            background-position: 0 0;

        }

        100% {

            background-position: -540px 0;

        }

    }

    .people{ width:60px; height:67px; background:url(images/step9.png) no-repeat; background-size:540px 67px;}

    </style>

</head>

<body>

    <div class="walk">

        <div class="people runner"></div>

    </div>

</body>

</html>

微云:step9.png

css3动画 9步的更多相关文章

  1. CSS3动画几个平时没注意的属性

    一.timing-function: steps() 一开始在使用CSS3的时候并没有太注意这个timing-function,只是注意到自定义贝塞尔曲线. 1)一个项目中的实例 先来看看左边加了st ...

  2. 【转】15个无比华丽的HTML5/CSS3动画应用

    原文转自:http://www.html5cn.org/article-7089-1.html 前几天,HTML5标准已经尘埃落定,未来的Web将会是由HTML5主导,当然作为开发者对这一喜讯更为动心 ...

  3. 解决浏览器background-image属性不支持css3动画

    问题 最近在使用background-image属性来实现css3的逐帧动画时,碰到了个问题.在chrome浏览器上,background-image属性是支持css3动画的,但是到了firefox上 ...

  4. 如何制作css3的3d动画——以骰子旋转为例，详解css3动画属性

    首先先来看两个用css3实现的炫酷的3d动画效果 1 2 3 4 5   6 你没看错,这个炫酷的效果都是用css3实现的. 下面是动画实现所需要用到的几个css3属性. 1.perspective: ...

  5. css3简单几步画一个乾坤图

    原文:[原创]css3简单几步画一个乾坤图 效果如上,鼠标移上去会有动画. 代码如下非常简单: <html> <head> <style> .outer{heigh ...

  6. 浅谈CSS3动画的凌波微步--steps()

    背景 一日敲代码的我,得到一个需求:写一个10秒的倒计时. 用JavaScript定时器麻溜写完之后,恰好同事勇司机接完水.瞟了一眼,然后凑过来说,这个用CSS3也可以写,而且一行JavaScript ...

  7. CSS3动画：流彩文字效果+图片模糊效果+边框伸展效果实现

    前言 首先第一步,先布局html代码如下: <div class="wrap"> <img src="images/1.jpg" class= ...

  8. css3动画性能优化--针对移动端卡顿问题

    一.使用css,jquery,canvas制作动画 1.Canvas 优点:性能好,强大,支持多数浏览器(除了IE6.IE7.IE8),画出来的图形可以直接保存为 .png 或者 .jpg的图形: 缺 ...

  9. CSS3动画那么强，requestAnimationFrame还有毛线用？

    一.哟,requestAnimationFrame, 新同学,先自我介绍下 Hello, 大家好,我就是风姿卓越,万种迷人的requestAnimationFrame,呵呵呵呵.很高兴和大家见面,请多 ...

随机推荐

  1. HTTP 错误 404.8 - Not Found

    HTTP 错误 404.8 - Not Found请求筛选模块被配置为拒绝包含 hiddenSegment 节的 URL 中的路径. 详细错误信息模块 RequestFilteringModule 通 ...

  2. 五大科技巨头VR/AR专利报告，Magic Leap以22.6%领跑

    在十月份发布的<VR/AR专利技术深度分析报告>指出,VR.AR行业的专利多被佳能.索尼.微软.谷歌等科技巨头"包养",但是并没有对这部分进行详细分析.近日,风投公司C ...

  3. asp.net mvc 上传下载文件的几种方式

    view: <!DOCTYPE html> <html> <head> <meta name="viewport" content=&qu ...

  4. 按键精灵http.定义getWeb

    Function 取网页源码(URL) Set objXML=CreateObject("Microsoft.XMLHTTP") objXML.Open "Get&quo ...

  5. JavaScript基本类型比较

    我们都知道js的基本类型有undefined,null,boolean,number,string; 当我们在进行基本数据类型的运算和比较时数据类型会根据运算符号和左右两边值的不同作如下转换: +   ...

  6. css margin相关问题及应用

    一.margin常见问题 1.IE6下双边距问题 margin双布局可以说是IE6下经典的bug之一.产生的条件是:block元素+浮动+margin. 2.maring重叠的问题 css2.0规范对 ...

  7. Android 使用URLConnection来post数据

    /** * @param postUrl * 需要post的地址 * @param map * 存储数据的map * @param handler * 处理message的handler */ pub ...

  8. ajax请求相关方法

    jquery的ajax请求相关方法有多个: 1.$.ajax() 示例: <!DOCTYPE html> <html> <head> <meta charse ...

  9. oracle 字段类型详解

    CHAR 固定长度字符串 最大长度2000 bytes VARCHAR2 可变长度的字符串 最大长度4000 bytes 可做索引的最大长度749 NCHAR 根据字符集而定的固定长度字符串 最大长度 ...

  10. centsOS下安装vsftp的配置

    1. 添加用户组 # groupadd www 2. 修改配置 # vi /etc/vsftpd/vsftpd.conf 查找: #chroot_list_enable=YES #chroot_lis ...