代码如下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            .box{
                width: 180px;
                height: 300px;
                margin: 50px auto;
                overflow: hidden;
                
            }
            .run{
                width: 180px;
                height: 300px;                
                background: url(images/images/charector.png) no-repeat ;//图片素材自己找。。。
                -webkit-animation:run 700ms steps(7) infinite;
            }
            @-webkit-keyframes run{
                from{
                    background-position: 0 0;
                }
                to{
                    background-position: -1260px 0;
                }
            }
        </style>
    </head>
    <body>
        <div class="box">
            <div class="run">
                
            </div>
            
        </div>
    </body>
</html>

本文转载自：http://www.cnblogs.com/qingxh/archive/2016/12/12/6164083.html

html5实现GIF动画！的更多相关文章

  1. HTML5树叶飘落动画

    查看效果:http://keleyi.com/keleyi/phtml/css3/15.htm 请使用Chrome浏览器查看本效果. html源代码: <!DOCTYPE HTML> &l ...

  2. 8款超酷的HTML5 3D图片动画源码

    1.HTML5移动端图片左右切换动画 今天要给大家分享一款很不错的图片左右切换焦点图动画,并且支持移动端触摸滑动.功能上,这款HTML5图片播放器支持鼠标滑动.手机端触摸滑动以及自动播放.外观上,这款 ...

  3. 9个超绚丽的HTML5 3D图片动画特效

    在Web 1.0时代,我们的网页中图片数量非常少,而且都是以静态图片为主.HTML5的出现,推动了Web 2.0的发展,同时也催生出了很多绚丽的HTML5图片动画特效,特别是有些还有3D的动画效果.本 ...

  4. 16款最佳HTML5超酷动画演示及源码

    1.HTML5/CSS3图片选择动画 可选择多张图片 之前我们已经分享过几款很酷的HTML5图片特效,像HTML5 3D图片折叠特效.HTML5 3D旋转图片相册等应用.今天我们来分享一款既炫酷又实用 ...

  5. 6款基于SVG的HTML5应用和动画

    1.HTML5 SVG 3D蝴蝶飞舞动画 逼真超酷 这次我们要分享的这款HTML5动画简直就是逆天,利用SVG制作的3D蝴蝶飞舞动画,蝴蝶飞舞动画非常逼真,蝴蝶飞舞的路线是利用SVG构造的.另外,动画 ...

  6. 基于HTML5 Tab选项卡动画切换特效

    基于HTML5 Tab选项卡动画切换特效.这是一款基于HTML5+CSS3实现的带有动画切换效果的Tab选项卡插件cbpFWTabs.效果图如下: 在线预览   源码下载 实现的代码. html代码: ...

  7. 9个绚丽多彩的HTML5进度条动画赏析

    进度条在网页应用中越来越广泛了,特别是现在的页面异步局部刷新时代,进度条可以让用户更好的等待操作结果.本文要分享9款绚丽多彩的HTML5进度条动画,有很多还是挺实用的,效果也非常不错. 1.CSS3发 ...

  8. HTML5 3D爱心动画及其制作过程

    之前有看到过很多基于HTML5或者CSS3制作的爱心动画,不过基本上都是2D平面的,今天在国外的网站上看到一个基于HTML5 3D的爱心动画,对于HTML5爱好者来说,不免兴奋了一把.下面将分享一下这 ...

  9. 浪漫程序员 HTML5爱心表白动画

    我们程序员在追求爱情方面也是非常浪漫的,下面是一位同学利用自己所学的HTML5知识自制的HTML5爱心表白动画,画面非常温馨甜蜜,这样的创意很容易打动女孩,如果你是单身的程序员,也赶紧来制作自己的爱心 ...

  10. HTML5/jQuery雷达动画图表 图表配置十分简单

    1.HTML5/jQuery雷达动画图表 图表配置十分简单 之前我们介绍过不少形形色色的HTML5图表了,像这款HTML5折线图表Aristochart是一款很不错的折线图表,这款HTML5 Canv ...

随机推荐

  1. 流量分析 seo alexa 排名

    百度权重 举例,百度搜索中输入"中医百科" ,排名前三的: http://www.a-hospital.com/w/中医 1. url是关键词的方式,包含中文名,说明当前百度的搜索 ...

  2. 20145227 《Java程序设计》第4周学习总结

    20145227 <Java程序设计>第4周学习总结 教材学习内容总结 第六章 继承与多态 6.1 何谓继承 1.继承共同行为 多个类中存在相同属性和行为时,将这些内容抽取到单独一个类中, ...

  3. [BIM]BIM中IFD介绍

    第三大支柱IFD - 确定交换的信息和你要的信息是同一个东西 IFD的全称是International Framework for Dictionaries,中文可以叫“国际字典框架”,和前两者IFC ...

  4. 【转】Tomcat调优指南

    转载地址:http://blog.csdn.net/woohooli/article/details/3954792 1          概述 本文档主要介绍了Tomcat的性能调优的原理和方法.可 ...

  5. [团队项目]后续安排 Github

    6.后续安排 第16周 周二晚7点之前将本代码上传到GITHUB. 周三上课时运行你们的系统给我观赏一下. 根据博客,运行演示,github代码情况评定第二个冲刺的分数. 至此,软件工程学期平时分截止 ...

  6. YTU 2297: KMP模式匹配 三（串）

    2297: KMP模式匹配 三(串) 时间限制: 1 Sec  内存限制: 128 MB 提交: 25  解决: 16 [提交][状态][讨论版] [Edit] [TestData] 题目描述 输入一 ...

  7. linq的创建 和 数据的增删改查

    1.linq创建之前,一定要在sql做好数据表的主外键关系. 2.linq文件是以.dbml结尾,一般一个数据库的名字就是一个linq的名字 3,以实例来演示增删改查 数据库的名字为linq,里面有两 ...

  8. linux（centos）下SVN服务器如何搭建

    检测是否符合pptp的搭建环境的要求 使用下面的指令: 123 cat /dev/net/tun如果这条指令显示结果为下面的文本,则表明通过:cat: /dev/net/tun: File descr ...

  9. Eclipse常用快捷键windows

    Ctrl+1:快速修正Ctrl+W: 关闭当前文件ctrl+O:打开outlineCtrl+D: 删除当前行 Ctrl+L: 定位在某行Ctrl+Q:转到上次修改位置Ctrl+/:注释代码Ctrl+H ...

  10. Python3基础 ,= 一个等式给多个变量赋值

    镇场诗:---大梦谁觉,水月中建博客.百千磨难,才知世事无常.---今持佛语,技术无量愿学.愿尽所学,铸一良心博客.------------------------------------------ ...