<!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. 在ubuntu下设置eclipse开发STM32等嵌入式设备

    之前为了能够让ROS与底层能够顺利通讯,我采用可开源开发板arduino ,因为arduino有ROS的库,能够按照ROS wiki上所给的教程就可以顺利的开发,但由于arduino的局限性,我觉得是 ...

  2. ASP.NET中ListBox控件的使用

    文章来源:http://www.cnblogs.com/fengzheng126/archive/2012/04/10/2441551.html ListBox控件属性介绍: SelectIndex: ...

  3. HTML5历史管理

    边看视频边做的练习,随机显示数字,分别使用history和hash来实现历史管理 <!doctype html> <html> <head> <meta ch ...

  4. 【小技巧】C#判断电脑是否联网

    using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; usin ...

  5. 【Python之路】第八篇--Python基础之网络编程

    Socket socket通常也称作"套接字",用于描述IP地址和端口,是一个通信链的句柄,应用程序通常通过"套接字"向网络发出请求或者应答网络请求. sock ...

  6. CSS实现三角形图标的原理《转载》

    网页中经常有一种三角形的图标,鼠标点一下会弹出一个下拉菜单之类的(之前淘宝也有,不过现在改版好像没有了) 之前以为是个png图标背景,后来在bootstrap中看到有一个图标样式叫做caret的用来实 ...

  7. Java代码之输出参数和（强制类型转换）

    说明(因为Java中java Application的参数都是默认的字符型的数据,所以需要强制类型转换这一步骤) 设计思想: 向系统里输入若干个参数,计算出参数个数,利用for语句计算出参数的和.(程 ...

  8. MySQL-Front 出现“程序注册时间到期 程序将被限制模式下运行”解决方式

    MySQL-Front 出现“程序注册时间到期 程序将被限制模式下运行”解决方式 在用mysql-front的时候遇到显示:程序注册时间到期程序将被限制模式下运行.可以在“帮助”菜单下的点“登记”-- ...

  9. 《学习的艺术》 (The Art of Learning)

    这是我本科期间读过的的一本,个人感觉很有价值的书.当时刚刚失恋,正在思考人生,看这本书的时候,收获很多. 划小圈 (Making Smaller Circles)

  10. Python语法点滴

    string: string.capitalize()  把字符串的第一个字符大写 string.startswith(obj)  string.endswith(obj) string.find(s ...