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

<!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. Unity Ray 射线

    射线:射线是3D世界一个向一个方向发射的一条无终点的线,在发射轨迹中与其他物体发生碰撞时,它将停止发射. 用途:射线范围比较广,多用于碰撞检测(如:子弹飞行是否击中目标).角色移动等. Ray是一个结 ...

  2. 教你用Python实现简单监督学习算法

    教你用Python实现简单监督学习算法 监督学习作为运用最广泛的机器学习方法,一直以来都是从数据挖掘信息的重要手段.即便是在无监督学习兴起的近日,监督学习也依旧是入门机器学习的钥匙. 这篇监督学习教程 ...

  3. Java之Swing体系——制作自己的登录界面

    我们制作登陆界面是简单的图形模式,并不具备其他功能: 这里使用两个库,如下: javax.swing.*; java.awt.*; 构造窗体对象要用到很多类,废话不多,直接代码~ package co ...

  4. 【MM系列】SAP MM模块-查看移动平均价的历史记录

    公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[MM系列]SAP MM模块-查看移动平均价的历 ...

  5. 【Linux开发】OpenCV在ARM-linux上的移植过程遇到的问题1---cvNamedWindow调用报错的问题

    问题描述: 这个实际上是最后一部的问题,将生成的共享库文件放入到了/usr/local/opencv-arm/lib下,并且设置了LD_LIBRARY_PATH中为/usr/local/opencv- ...

  6. Win10.Shift+鼠标右键_CMD(管理员)

    1.资料: 1.1.Windows10下设置Shift+右键增加cmd - wyx0712的博客 - CSDN博客.html(https://blog.csdn.net/wyx0712/article ...

  7. C#方法名前的方括号

    1.序列化:[Serializable]public void 方法名(){...} 2.WebServices方法:[WebMethod]public void 方法名(){...} 3.Ajax( ...

  8. 普通项目——>maven项目——>SSM（一）

    首先应该明白,SSM是什么? SSM指的是Spring+SpringMVC+MyBatis Spring Spring就像是整个项目中装配bean的大工厂,在配置文件中可以指定使用特定的参数去调用实体 ...

  9. 使用 PC 做 FTP/TFTP 服务器，上传和下载文件

    使用PC做TFTP服务器,上传和下载文件需要用到一个工具软件,IPOP,可百度下载. 1.在桌面新建一个空闲的文件夹,作为TFTP服务器的存储位置,然后打开IPOP软件,开启服务. 图片中 编号3 的 ...

  10. 《剑指offer》面试题24 二叉搜索树的后序遍历序列 Java版

    (判断一个元素均不相同的序列是否为一个BST的LRD) 书中方法:首先对于二叉搜索树,左子树中的所有元素小于根节点小于右子树中的所有元素,然后后序遍历序列最后一个元素是根节点,这是我们已知的条件.这道 ...