一个很简单的小动画，但是还挺有意思的，就是找这种图片很麻烦，我这里把我找的一张图片贴上来，这张图片是我在网上找的，又改了背景色和大小。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>走路</title>

    <style type="text/css">

        .box{

            width:50px;

            height:160px;

            border:1px solid #000;

            margin:50px auto 0;

            overflow:hidden;

            position:relative;

        }

        .box img{

            position: absolute;

            left:0;

            top:0;

            animation:walking 1s steps(10) infinite;

        }

        @keyframes walking{

            from{

                left:0;

            }

            to{

                left:-520px;

            }

        }

    </style>

</head>

<body>

    <div class="box"><img src="data:images/1212.png" alt="walking"></div>

</body>

</html>

效果展示:(感觉效果不是特别好，动作的连贯性还不够好，需要改改图片，偷个懒不改啦~)

CSS3——制作人物走路的小动画的更多相关文章

  1. 详解用CSS3制作圆形滚动进度条动画效果

    主  题 今天手把手教大家用CSS3制作圆形滚动进度条动画,想不会都难!那么,到底是什么东东呢?先不急,之前我分享了一个css实现进度条效果的博客<CSS实现进度条和订单进度条>,但是呢, ...

  2. 用CSS3制作50个超棒动画效果教程

    这50个CSS动画集合可以让你通过使用JavaScript函数来让动画更生动.为了能够预览到这些惊人的CSS3技术带来的动画特效,请大家使用如Safari和Chrome这类基于WebKit内核的浏览器 ...

  3. 使用 CSS3 制作一组超时尚的动画按钮效果

    通过 CSS3 的新特性,我们创作出好的交互和效果的可能性大大增加.这篇文章中,我想与大家分享一些 CSS3 动画按钮效果.我们的想法是创建一个具有不同风格的一些动画链接元素,鼠标悬停时有动画效果和活 ...

  4. 使用CSS3制作网站常用的小三角形

    现在在前端开发中,经常会看到一些小三角形,如一些导航的下拉菜单,还有一些聊天信息的气泡模式,很多时候我们都是通过切图片的方法来制作,今天零度给大家分享一个完全通过css3实现的小三角效果. 先上htm ...

  5. 分享9款用HTML5/CSS3制作的动物人物动画

    1.纯CSS3绘制可爱的蚱蜢 还有眨眼动画 今天我们要分享一个利用纯CSS3绘制的蚱蜢动画,非常可爱. 在线演示 源码下载 2.HTML5 Canvas头发飘逸动画 很酷的HTML5动画 HTML5 ...

  6. 8个纯CSS3制作的动画应用及源码

    对于一个复杂的图形或者动画来说,之前我们的处理方式是图片叠加或者利用CSS+JavaScript的方法,然而随着CSS3标准的不断成熟,我们甚至完全可以利用CSS3来绘制一些图片和制作丰富的动画特效. ...

  7. 3D Grid Effect – 使用 CSS3 制作网格动画效果

    今天我们想与大家分享一个小的动画概念.这个梦幻般的效果是在马库斯·埃克特的原型应用程序里发现的​​.实现的基本思路是对网格项目进行 3D 旋转,扩展成全屏,并呈现内容.我们试图模仿应用程序的行为,因此 ...

  8. 纯CSS3制作卡通场景汽车动画效果

    前言 今天分享一下我昨晚做的CSS3动画效果——卡通场景汽车动画.在接触CSS3动画之前,我之前实现一些简单的动画效果都是使用flash完成的.但是自从CSS3横空出世,在移动端对CSS3动画的运用越 ...

  9. css3制作旋转动画

    现在的css3真是强大,之前很多动画都是用jq来实现,但是css3制作的动画要比jq实现起来简单很多,今天呢,我自己也写了一个css旋转动画和大家分享.效果如下面的图片 思路:1.制作之前呢,我们先来 ...

随机推荐

  1. 测开之路一百四十四：ORM之SQLAlchemy查询

    在上一篇的基础上,插入数据 查询 Department.query.all() # 用表对象查db.session.query(Department).all() # 用db对象查 查询前两条,直接p ...

  2. robotframework的变量的使用

    本篇用以记录RF的变量的使用 目录 1.简要介绍 2.使用关键字添加变量 3.使用菜单添加变量 1.简要介绍 RF可以通过菜单和关键字来添加变量,可以根据自己的需求来选择添加变量的方式 2.使用关键字 ...

  3. Unity3D 可空值类型 Nullable

    值类型的变量永远不会变null,因为值类型是其本身不会变成null.引用类型可变成null,内存会全部使用0来表示null,因为这种开销会降低,仅仅需要将一块内存清除. 表示一些空值的方案: 1.使用 ...

  4. java 发送 http post 和 get 请求(利用unirest)

    调用服务器端的接口在前端调用,但是我们也会经常遇到在服务器后端调用接口的情况,网上的例子大部分都是用 jdk 原生的 URL realUrl = new URL(url); URLConnection ...

  5. Java的in.nextInt()和in.nextLine()方法的具体内涵

    本人也是刚开始学习java语言,在学习的过程中,老师让我们做一个模拟学生学籍管理系统的小程序.因为刚开始,做的是比较简单的,用switch语句做界面,然后配合Scanner 接收输入的数字进行跳转,完 ...

  6. TCP/IP协议-1

    转载资源,链接地址https://www.cnblogs.com/evablogs/p/6709707.html

  7. 基于html5二个div 连线

    因为要实现拖拽连线研究了一下基于extjs 和html5的不同实现方法 extjs底层的画图引擎是svg 不知道在html5大潮即将袭来的前夕一贯走在技术前沿的extjs开发团队没有自己封装基于htm ...

  8. 【Qt开发】【VS开发】VS2010+Qt开发环境搭建

    QT与JAVA有点类似,也是一种跨平台的软件(当然在windows平台和linux平台需要安装相应的QT开发环境和运行库,类似于JAVA在不同平台下的虚拟机JVM环境),因此对于某些需要同时支持win ...

  9. 如何在centos7中显示/etc/目录下以非字母开头，后面跟了一个字母及其它任意字符的文件或目录

    ls /etc |grep "^[^[:alpha:]][[:alpha:]].*"

  10. [Python3] 004 字符串的基本使用

    目录 1. 字符串简介 1.1 作用 1.2 注意点 2. 使用方式 2.1 用引号括起来 少废话,上例子 2.2 单.双引号可以"轮换交替" 少废话,上例子 3. 转义字符 3. ...