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

<!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. Python 笔试集（1）：关于 Python 链式赋值的坑

    前言 Python 的链式赋值是一种简易型批量赋值语句,一行代码即可为多个变量同时进行赋值. 例如: x = y = z = 1 链式赋值是一种非常优雅的赋值方式,简单.高效且实用.但同时它也是一个危 ...

  2. 阶段3 1.Mybatis_11.Mybatis的缓存_6 Mybatis中的一级缓存

    Mybatis中的一级缓存和二级缓存         一级缓存:             它指的是Mybatis中SqlSession对象的缓存.             当我们执行查询之后,查询的结 ...

  3. C 语言中的预处理

    C 语言中以 # 开头的就是预处理指令,例如 #include . 预处理指令的用途 所有的预处理指令都会在 GCC 编译过程的预处理步骤解析执行,替换为对应的内容.在下一步编译过程中,看不到任何预处 ...

  4. laravel 5.6 使用RabbitMQ作为消息中间件

    1.Composer安装laravel-queue-rabbitmqcomposer require vladimir-yuldashev/laravel-queue-rabbitmq2.在confi ...

  5. 6.824 Lab 3: Fault-tolerant Key/Value Service 3A

    6.824 Lab 3: Fault-tolerant Key/Value Service Due Part A: Mar 13 23:59 Due Part B: Apr 10 23:59 Intr ...

  6. eslint+prettier 的 VSCode配置项

    { "files.autoSave": "off", "editor.fontSize": 12, "terminal.integ ...

  7. docker 安装mysql 并将文件挂载到本地

    首先准备好挂载的文件路径 执行mysql创建以及挂载的命令(这里还可以使用-e环境变量来创建新用户MYSQL_USER,MYSQL_PASSWORD) docker run -d -p : --res ...

  8. python+selenium上传文件——input标签

    我们要区分出上传按钮的种类,大体上可以分为两种: 第一种普通上传:将本地文件路径作为一个值,放在input标签中,通过form表单将这个值提交给服务器: 第二种插件上传:是通过Flash.JavaSc ...

  9. redis在微博与微信等互联网应用笔记

    Redis实战redis在微博与微信等互联网应用实例讲解全集 1. 对象缓存 id user balance 1 john 1200 2 tom 3000 对于这种存储,redis可以使用mset o ...

  10. Rest_Framework常用插件

    1. 认证Authentication 可以在配置文件中配置全局默认的认证方案 REST_FRAMEWORK = { 'DEFAULT_AUTHENTICATION_CLASSES': ( 'rest ...